[NEXT-1192] Failed to find font override - next/font/google
Problem
Verify canary release - [X] I verified that the issue exists in the latest Next.js canary release Provide environment information [code block] 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 [code block] [code block] Describe the Bug Output Output works as expected Console Output [code block] 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 : [code block] 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_ <sub>NEXT-1192</sub>
Error Output
error - Failed to find font override values for font `Unbounded`
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement Font Fallback Metrics for Unbounded Font
The error 'Failed to find font override values for font `Unbounded`' occurs because the font metrics for the specified Google font are not defined in the `google-font-metrics.json` file. This prevents the application from calculating the fallback font metrics correctly, leading to the failure in font optimization.
Awaiting Verification
Be the first to verify this fix
- 1
Locate the Font Metrics File
Navigate to the Next.js source directory where the font metrics are defined. This is typically found in `next/src/server/google-font-metrics.json`.
- 2
Add Metrics for Unbounded Font
Update the `google-font-metrics.json` file to include the necessary metrics for the 'Unbounded' font. You can use a tool like FontKit to extract the required metrics or refer to existing metrics for similar fonts as a guideline.
json"Unbounded": { "ascender": 800, "descender": -200, "lineHeight": 1000, "unitsPerEm": 1000 } - 3
Test the Changes
Run your Next.js application locally to verify that the font metrics for 'Unbounded' are now recognized. Check the console for any errors related to font loading.
bashnpm run dev - 4
Deploy the Changes
Once verified locally, commit the changes to your repository and deploy the application to your production environment to ensure the fix is applied.
bashgit commit -m 'Add metrics for Unbounded font' && git push - 5
Monitor for Issues
After deployment, monitor the application for any font-related issues or errors in the console. Ensure that the 'Unbounded' font is rendering correctly across different browsers.
Validation
Confirm the fix by checking that the 'Unbounded' font loads without errors in the console and that the application displays the font correctly in the UI. Additionally, verify that no other fonts are affected by this change.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep