how to use next font google in a server with blocked internet access #65595

alexmondaini · 2024-05-10T06:03:57Z

alexmondaini
May 10, 2024

Summary

I am new to the javascript world and next.js , and my environment blocks access to google apis which are accessed when a new font from googe is imported. I am following this tutorial from next.js https://nextjs.org/learn/dashboard-app/optimizing-fonts-images and the idea is to set my app/layout.tsx like that:

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

and app/ui/fonts like this:

import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });

The problem is that download step on my server will not work, and then another font is used as a fallback. I would like to use fonts from google in my project. What is the way to go in that scenario ?

Thanks

Additional information

No response

Example

No response

zanzlender · 2024-05-10T07:08:58Z

zanzlender
May 10, 2024

You can download the fonts, then add them to the public folder and import/use those as local fonts. Or you can add them anywhere and just import them, this might make your bundles a bit bigger but you won't need to download the from Google API.

0 replies

alexmondaini · 2024-05-10T11:45:51Z

alexmondaini
May 10, 2024
Author

ok, did that but noticed that while the page is loading there is a shift between one font and the other, is this normal ?

2 replies

nayounsang May 11, 2024

This is the "font flash". You can use or font file optimization or other optimization.

alexmondaini May 16, 2024
Author

I do not understand how to do this, could you send me some link of how font optimization is done in next js ?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to use next font google in a server with blocked internet access #65595

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

how to use next font google in a server with blocked internet access #65595

alexmondaini May 10, 2024

Summary

Additional information

Example

Replies: 2 comments · 2 replies

zanzlender May 10, 2024

alexmondaini May 10, 2024 Author

nayounsang May 11, 2024

alexmondaini May 16, 2024 Author

alexmondaini
May 10, 2024

Replies: 2 comments 2 replies

zanzlender
May 10, 2024

alexmondaini
May 10, 2024
Author

alexmondaini May 16, 2024
Author