Google Fonts not loading in Next.js when deployed to Vercel

Question

When running the app in http://localhost:3000 everything works and looks great. But upon deploying my Next.js app to Vercel, the fonts aren't showing and nothing comes up in the logs.

I followed the recommendation in the Next.js docs and this is what my _document.tsx looks like -

import { Global } from '@mantine/core'
import { createGetInitialProps } from '@mantine/next'
import Document, { Head, Html, Main, NextScript } from 'next/document'

const getInitialProps = createGetInitialProps()

export default class _Document extends Document {
    static getInitialProps = getInitialProps

    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.googleapis.com" />
                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
                    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital@0;1&family=Roboto+Condensed:wght@300;700&display=swap" rel="stylesheet" />
                    <Global
                        styles={(theme) => ({
                            'body': {
                                backgroundColor: theme.colors.gray[3],
                                color: theme.colors.gray[8],
                                fontFamily: '\'Roboto Condensed\', sans-serif',
                            },
                            '.primary-text': {
                                fontFamily: '\'Bebas Neue\', sans-serif',
                            },
                            '.secondary-text': {
                                fontFamily: '\'Lora\', serif',
                            },
                        })}
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

Any insight will do... help? Thanks!

alexandre_anicio · Answer 1 · 2022-10-23T22:14:04.683

7

Got this problem recently, tried to disable optimize fonts and got the fonts being fetched again on build:

// under next.config.js
 module.exports = {
     ...
     optimizeFonts: false,
 }

edited Oct 23 '22 at 22:14

answered Jun 13 '22 at 18:14

alexandre_anicio

143
8

Did'nt worked for me – Kritarth Sharma Aug 24 '23 at 07:25
What's your nextjs version? Things may have changed a bit on 13+ versions – alexandre_anicio Aug 24 '23 at 13:33

score 5 · Accepted Answer · answered May 27 '22 at 07:17

5

Many hours and many deployments later, I found a solution that works for now. I removed all the Google Fonts references from the Head component and instead downloaded the css file it refers to. I copied it to /styles/fonts.css and it's now imported in _app.tsx.

All the references to the woff2 files from within the css remained unchanged. At least now I can see the font files being downloaded in the Network tab.

answered May 27 '22 at 07:17

TechGolemn

329
1
3
11

I know this is an old post, but you deserve a big high five anyway! I wasted a lot of time trying to find out why fonts weren't the same on localhost dev and on production deployment at Vercel, despite trying both @import statements and Next/font. Nothing worked - but your suggestion did. Thank you! – user5801710 Jul 02 '23 at 18:42

score 0 · Answer 3 · answered Aug 24 '23 at 08:46

For me , adding it in <link worked like the example below , rather than using it as import url in css files

   <Head>
          
<link
        href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
        rel='stylesheet'
      />
</Head>

Google Fonts not loading in Next.js when deployed to Vercel

3 Answers3