Poppins font displayed badly on iOS

[imclint21]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
    Binaries:
      Node: 20.3.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://perdu.com/

To Reproduce

import { Poppins } from "next/font/google";

const poppins = Poppins({
    subsets: ["latin"],
    weight: ["100", "200", "300", "400", "500"]
});

Describe the Bug

Hi,

I'm using nextjs with google font (@next/font), and the font I use is Poppins.

Expected Behavior

On iOS the font seems badly displayed, looks not good like in the desktop.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[balazsorban44]

Hi, did you verify this outside Next.js that you have a suspicion about this being a bug?

Eg.: if you visit https://fonts.google.com/specimen/Poppins can you see the same problem?

Can you clarify what you mean by "badly displayed"/"looks not good"?

[garrettsiegel]

Hi @imclint21, upon visiting the link you provided - https://perdu.com - which you mentioned reproduces this issue/bug, I noticed that there are no fonts or styles linked to the page elements when inspecting it.

[imclint21]

Hi @imclint21, upon visiting the link you provided - https://perdu.com - which you mentioned reproduces this issue/bug, I noticed that there are no fonts or styles linked to the page elements when inspecting it.

You have to translate it!

[AHarry7]

I am facing the same issue. Poppins looks so bad on Ios.

[abnersn]

I second this issue, Poppins looks terrible on iOS when imported from next. Looks normal from Google fonts.

[mctrl]

Same here with Poppins font. When I run the my next solution locally, the font doesn't seem to load. MACOS Sonoma 14.5 (23F79) node version 22.2.0 "next": "^14.2.14"

I've tried using another google font instead of Poppins and it renders.

whereas when I use poppins the variable is undefined and not created