Lato font has a bad rendering in NextJS

[nicolas-bourles]

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

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

Additional context

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

[emmamarichal]

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

[WilsonPhooYK]

I have this issue as well.