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!
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.