To add a google font to an Next.js application, create a Custom Document ( _document.tsx in the pages folder), and copy from google fonts
// pages/_document.tsx
import Document, {
DocumentContext,
DocumentInitialProps,
Html,
Head,
Main,
NextScript
} from 'next/document'
class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise {
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
render() {
return (
)
}
}
export default MyDocument
Finally, apply this CSS rule