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

G

3

8

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!

Glynis answered 27/5, 2022 at 0:3 Comment(0)

G

7

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.

Glynis answered 27/5, 2022 at 7:17 Comment(1)

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! – Schoen 2/7, 2023 at 18:42

F

9

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,
 }

Finny answered 13/6, 2022 at 18:14 Comment(2)

Did'nt worked for me – Seldon 24/8, 2023 at 7:25

What's your nextjs version? Things may have changed a bit on 13+ versions – Finny 24/8, 2023 at 13:33

G

7

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.

Glynis answered 27/5, 2022 at 7:17 Comment(1)

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! – Schoen 2/7, 2023 at 18:42

S

0

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>

Seldon answered 24/8, 2023 at 8:46 Comment(0)

Recommended topics

Hot tags