GitHub Community
NextJS, failed to fetch ' Open Sans' from Google Fonts on build #177046
-
BodyHow to set the font once and forever in a NextJS application without having to go online? Guidelines
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
You can set a font permanently by downloading the font files. To do it:
This should work! |
Beta Was this translation helpful? Give feedback.
-
|
ok, thanks! I'll try it. |
Beta Was this translation helpful? Give feedback.
-
|
@tommatson I implemented the font as you suggested and the build was successful, however when running the app a warning message "Failed to download 'Open Sans' fron Google Fonts. Using fallback font instead" appeared. Probably because I am offline. Can this be ignored? How can I check if the font is being loaded? |
Beta Was this translation helpful? Give feedback.
-
|
The most likely fix is that the app still tries to load the Google hosted font somewhere. Remove any next font google import and any link tag to fonts.googleapis.com, then use a local font with next font local so the build and runtime never go online. To confirm it worked, reload with devtools open and check the network tab shows no requests to fonts.googleapis.com and that your woff2 files load from local paths. I have coded an example for you import type { Metadata } from "next"
import localFont from "next/font/local"
import "./globals.css"
const openSans = localFont({
src: [
{ path: "./fonts/OpenSans-Regular.woff2", weight: "400", style: "normal" },
{ path: "./fonts/OpenSans-SemiBold.woff2", weight: "600", style: "normal" },
{ path: "./fonts/OpenSans-Bold.woff2", weight: "700", style: "normal" }
],
display: "swap"
})
export const metadata: Metadata = { title: "App" }
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={openSans.className}>
<body>{children}</body>
</html>
)
}Place the woff2 files under app fonts. This tells Next to bundle the font and serve it locally. The warning about failed Google download will disappear once all google font imports and link tags are removed. If the warning persists, search the repo for fonts.googleapis.com and next font google and delete those references, or move to a plain css font face in globals.css that points to files under public fonts. If this solved it please mark the answer as helpful so others can find it easily. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your help! I'll follow the steps and get back to you with the result. |
Beta Was this translation helpful? Give feedback.
-
|
No warnings anymore. Font loaded from local file. |
Beta Was this translation helpful? Give feedback.
The most likely fix is that the app still tries to load the Google hosted font somewhere. Remove any next font google import and any link tag to fonts.googleapis.com, then use a local font with next font local so the build and runtime never go online. To confirm it worked, reload with devtools open and check the network tab shows no requests to fonts.googleapis.com and that your woff2 files load from local paths.
I have coded an example for you