google / fonts

Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
https://fonts.google.com
18.22k stars 2.62k forks source link

Lato font has a bad rendering in NextJS #8377

Open nicolas-bourles opened 1 week ago

nicolas-bourles commented 1 week ago

I use the Lato font with a font weight 400, on the framework NextJS, with the font component, and I see a bad rendering of some characters.

Thanks a lot for your help :)

Describe the bug

On display, with the specified font-weight, the font isn't rendered correctly. I have tested with Roboto a font like Lato, and I don't have the same problem.

To Reproduce

On the NextJS framework, use the Lato font like this, font example in a src/common/styled/app/base/fontFace.ts file. By the way, I use Styled Components:

import { Lato } from 'next/font/google'
import { css } from 'styled-components'

const lato = Lato({
  weight: ['400', '700', '900'],
  subsets: ['latin'],
  variable: '--font-lato',
})

const fontsFace = () => css`
  :root {
    --font-lato: ${lato.style.fontFamily};
  }
`

export default fontsFace

After, I use the CSS variable like this:

body {
      font-family: var(--font-lato);
      font-weight: 400;
}

Expected behavior

Like another fonts, I expect to have a good rendering, and not the bad rendering that you can see on the first 2 screenshots below.

Screenshots

Image Image

Test with the Roboto font with font-weight: 400: Image Image

Additional context

Windows 10, Chrome 129.0.6668.101, Firefox 128.3.1esr (64 bits)

emmamarichal commented 6 days ago

is anyone on the eng team can take a look? @evanwadams? or @m4rc1e maybe?

WilsonPhooYK commented 5 days ago

I have this issue as well.