[NEXT-1192] Failed to find font override - next/font/google

[maxencerb]

Verify canary release

• 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.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.3
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

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

Font optimization (@next/font)

Link to the code that reproduces this issue

https://github.com/maxencerb/next-font-bug

To Reproduce

// utils/fonts.ts
import { Unbounded } from 'next/font/google';

export const unbounded = Unbounded({
  subsets: ['latin'],
  display: 'swap',
})

// app/page.tsx
import { unbounded } from "../utils/fonts"

export default function Home() {
  return (
    <h1 className={unbounded.className}>TEST TITLE</h1>
  )
}

Describe the Bug

Output

Output works as expected

Console Output

error - Failed to find font override values for font `Unbounded`

Explaination

All fallback font metrics from google are loaded from next/font/google/get-fallback-font-override-metrics.ts where we can see the following method and doc :

// @ts-ignore
import { calculateSizeAdjustValues } from 'next/dist/server/font-utils'
// @ts-ignore
import * as Log from 'next/dist/build/output/log'

/**
 * Get precalculated fallback font metrics for the Google Fonts family.
 *
 * TODO:
 * We might want to calculate these values with fontkit instead (like in next/font/local).
 * That way we don't have to update the precalculated values every time a new font is added to Google Fonts.
 */
export function getFallbackFontOverrideMetrics(fontFamily: string) {
  try {
    const { ascent, descent, lineGap, fallbackFont, sizeAdjust } =
      calculateSizeAdjustValues(
        require('next/dist/server/google-font-metrics.json')[fontFamily]
      )
    return {
      fallbackFont,
      ascentOverride: `${ascent}%`,
      descentOverride: `${descent}%`,
      lineGapOverride: `${lineGap}%`,
      sizeAdjust: `${sizeAdjust}%`,
    }
  } catch {
    Log.error(`Failed to find font override values for font \`${fontFamily}\``)
  }
}

So I think there might be a fix but I don't really know how to implement it. I tried looking at the local font optimization code.

Maybe someone can either find the solution to calculate the values with fontkit or at least update the json file under next/src/server/google-font-metrics.json and tell how to find those values.

Expected Behavior

Find the font fallback for any google font

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1192

[joepetrillo]

Having the same issue with Golos_Text

[nattui]

Same issue with Newsreader

[amol909]

same issue with Inter_Tight

[efollette]

same issue with Inter_Tight

[marcofranssen]

Same with Sofia Sans Semi Condensed

I basically followed the tailwind way of implementing it. I'm using the experimental appDir.

[jacobhq]

May be unhelpful but I just update the import to next/font/google (which I know you've already done) and restarted the dev server and it seemed to work again.

[Artsiom-Mazurkevich]

Hi everybody! Adding " display: 'swap' " in options, helped me!

[BMscis]

Adding @font-face on my css fixed it for me:

@font-face {
  font-family: 'Bungee Spice';
  src: url('/fonts/BungeeSpice-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[chris-monahan]

Seem to be having the same issue with Alkatra

[marcelo-albuquerque]

Having the same issue with Golos_Text

Me too.

[IntiSilva]

Same issue with Bruno Ace

[IntiSilva]

Another thing, I'm seeing that a lot of people including myself are having issues with Next new appdir in the different steps of developing an app. I would recommend that u don't use the app dir and use the common pages structure, I'm using v 13.4.1 that it's supposed to be stable and I'm breaking my head against the keyboad bc I can't get a font or a simple animation to work.

[mirsahib]

Same issue with Comme
using "next": "13.3.4",

[gugiserman]

Same with Texturina

[daniwasonline]

Another thing, I'm seeing that a lot of people including myself are having issues with Next new appdir in the different steps of developing an app. I would recommend that u don't use the app dir and use the common pages structure, I'm using v 13.4.1 that it's supposed to be stable and I'm breaking my head against the keyboad bc I can't get a font or a simple animation to work.

I've also been bashing my ahead against my keyboard, it's a real struggle after using the old system for so long 😅. Take this with a grain of salt as I've been very optimistic (and enthusiastic!) about this change for a while now, but:

/app is a massive shift in the Next paradigm and many other components in the ecosystem haven't quite adapted to the new format. In my opinion, the App directory is a lot faster and is just so much more convenient to use! Personally, I make a lot of apps that pull data from APIs or databases, and the appDir just makes my life easier. Change usually takes a while, esp with smth as big as this, so it might take a while for third-party components and modules to become compatible with the new system.

In the mean time, you could wrap client-designed/legacy components in client component wrappers to have them work with the new system - I think the Next docs even talk about doing this (although I may be wrong).

Also, still having this issue with Golos_Text as of today on 13.4.4 (appdir). Hopefully this can be addressed soon :D

[haneenmahd]

For my case, I think the font just loads fine but it's just the error when building the app. I'm using the Newsreader font. I'm also using the App Router, which is supposed to be stable by now.

I am also using Inter font in the same project within App Router itself but doesn't seem to have an issue with it.

[haneenmahd]

New Update!

This behaviour is random and happens unexpectedly. It doesn't seem like I have it right now! I didn't made any change to the code.

Screen.Recording.2023-05-30.at.15.55.58.mov

[shaun-scale]

cc @leerob - lots of struggle here

[letkeeko]

+1 next font feature seems buggy 👎 - easier to go traditional?

[leerob]

Thanks for the shout @shaun-scale! We'll take a look 🙏

[davaakhuunet]

Another thing, I'm seeing that a lot of people including myself are having issues with Next new appdir in the different steps of developing an app. I would recommend that u don't use the app dir and use the common pages structure, I'm using v 13.4.1 that it's supposed to be stable and I'm breaking my head against the keyboad bc I can't get a font or a simple animation to work.

I've also been bashing my ahead against my keyboard, it's a real struggle after using the old system for so long 😅. Take this with a grain of salt as I've been very optimistic (and enthusiastic!) about this change for a while now, but:

/app is a massive shift in the Next paradigm and many other components in the ecosystem haven't quite adapted to the new format. In my opinion, the App directory is a lot faster and is just so much more convenient to use! Personally, I make a lot of apps that pull data from APIs or databases, and the appDir just makes my life easier. Change usually takes a while, esp with smth as big as this, so it might take a while for third-party components and modules to become compatible with the new system.

In the mean time, you could wrap client-designed/legacy components in client component wrappers to have them work with the new system - I think the Next docs even talk about doing this (although I may be wrong).

Also, still having this issue with Golos_Text as of today on 13.4.4 (appdir). Hopefully this can be addressed soon :D

Same same

[jacobcwright]

+1 for Instrument_Sans

[haneenmahd]

Another thing, I'm seeing that a lot of people including myself are having issues with Next new appdir in the different steps of developing an app. I would recommend that u don't use the app dir and use the common pages structure, I'm using v 13.4.1 that it's supposed to be stable and I'm breaking my head against the keyboad bc I can't get a font or a simple animation to work.

I've also been bashing my ahead against my keyboard, it's a real struggle after using the old system for so long 😅. Take this with a grain of salt as I've been very optimistic (and enthusiastic!) about this change for a while now, but:
/app is a massive shift in the Next paradigm and many other components in the ecosystem haven't quite adapted to the new format. In my opinion, the App directory is a lot faster and is just so much more convenient to use! Personally, I make a lot of apps that pull data from APIs or databases, and the appDir just makes my life easier. Change usually takes a while, esp with smth as big as this, so it might take a while for third-party components and modules to become compatible with the new system.
In the mean time, you could wrap client-designed/legacy components in client component wrappers to have them work with the new system - I think the Next docs even talk about doing this (although I may be wrong).
Also, still having this issue with Golos_Text as of today on 13.4.4 (appdir). Hopefully this can be addressed soon :D

Same same

I have also noticed some weird bugs that are very hard to reproduce again but occurs often during development when using Next.js App Directory.

[haneenmahd]

New Update!

This behaviour is random and happens unexpectedly. It doesn't seem like I have it right now! I didn't made any change to the code.

Screen.Recording.2023-05-30.at.15.55.58.mov

I can confirm that this issue still persists and is there a fix coming soon?

[haneenmahd]

New Update!

This behaviour is random and happens unexpectedly. It doesn't seem like I have it right now! I didn't made any change to the code.

Screen.Recording.2023-05-30.at.15.55.58.mov

I can confirm this issue still persists and is there a new fix WIP?

I would be super happy to work on this issue if no one's currently working on one :)

[jacobcwright]

Any update or expected timeline?

[sozonome]

Same issue for Geologica font 🙏

[ProchaLu]

@samcx, thx! We don't see any font override error with Young_Serif anymore. Fixed in v14.1.1-canary.66

The issue got reintroduced in Next.js v14.1.2 but fixed again in Next.js v14.2.0-canary.0

   ▲ Next.js 14.1.2

   Creating an optimized production build ...
 ⨯ Failed to find font override values for font `Young Serif`

   ▲ Next.js 14.2.0-canary.0

   Creating an optimized production build ...
 ✓ Compiled successfully

[samcx]

@ProchaLu Are you able to reproduce reliably? May have been a stale .next.

A good reminder I should update the package again since a new version came out → https://github.com/seek-oss/capsize/releases.

[ProchaLu]

@samcx , here is a small repro for this issue in Next.js 14.1.2, but what I missed yesterday was that Next.js 14.1.2 release notes say that this release does not include all pending features/changes on canary.

Note: this is a backport release for critical bug fixes -- this does not include all pending features/changes on canary

   ▲ Next.js 14.1.2
   - Experiments (use at your own risk):
     · typedRoutes

   Creating an optimized production build ...
 ⨯ Failed to find font override values for font `Young Serif`

[samcx]

@ProchaLu Ah I see. Yes, 14.1.2 does not have the with the fix. Just to clarify, it's perfectly fine to use the latest canary!

[webdiego]

Same...I followed the documentation.
I've create a font.ts where I load all fonts form google and export them.

• add this in tailwind.config.ts

extend: { fontFamily: { sans: ["var(--font-inter)"], mono: ["var(--font-nanum-mono)"], }, },
then in layout.ts I've tried :

<body className={${nanum_Pen_Script.variable}}>{children}</body>

and

<body className={font-mono}>{children}</body>

with no results

[SiebeBaree]

Problem is still not fixed with the Gabarito google font. It doesn't give me an error but my font is still system-ui. I'm using [email protected] (also tried 14.1.1 and 14.1.4)

[webdiego]

In the end I have downloaded the font and am using it as I used to do...

[heysagnik]

+1 for Instrument_Sans

any solutions ?

[samcx]

If you guys can provide simple s, I'll take a look!

[mwawrusch]

Still not fixed for M PLUS Rounded 1c in 14.2.0.

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

Thank you

[samcx]

@mwawrusch I think this particular one isn't supported yet. We use the package @capsizecss/metrics to find the font override.

• https://github.com/seek-oss/capsize/blob/ce7dcb7c75fa77f8dd84e17595edcc395fa0d657/packages/metrics/src/entireMetricsCollection.json#L14332
• Can confirm we're on the latest version →

  next.js/packages/next/package.json

  Line 143 in c9c074c

  "@capsizecss/metrics": "2.2.0",

[mwawrusch]

@mwawrusch I think this particular one isn't supported yet. We use the package @capsizecss/metrics to find the font override.

• https://github.com/seek-oss/capsize/blob/ce7dcb7c75fa77f8dd84e17595edcc395fa0d657/packages/metrics/src/entireMetricsCollection.json#L14332
• Can confirm we're on the latest version →

  next.js/packages/next/package.json

  Line 143 in c9c074c

  "@capsizecss/metrics": "2.2.0",

Thanks - I added seek-oss/capsize#189

[mwawrusch]

@samcx

Pull request should be merged soon: seek-oss/capsize#192 . Appreciate all your work.

[samcx]

@mwawrusch The addition for M PLUS Rounded 1c should come up in the latest canary 🔜 !

[samcx]

@mwawrusch It is on v14.3.0-canary.4 now!

[kxhcfk]

@samcx M_PLUS_Rounded_1c don't work if weight is 900

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

[samcx]

Looks like this locked due to inactivity. I will be constantly looking to update the @capsizecss/metrics package until we automate it!

@kxhcfk We may have to trigger another one of this → #62704, looking into it.