Menu
Followed the documentation and added a _document.js file with the provided code:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
When I use my chrome extension font checker and verify in the inspector, it states that it using the defaults fonts. Any idea how I can get this to work? Might there be some interference with the fact that I'm using tailwindcss?
646
asked Sep 11 '25 06:09
I faced this problem a few minutes ago and fixed this by just adding one line of code.
Make sure you've added display: "swap" in your code like this -
const poppins = Poppins({
subsets: ["latin"]
weight: ["100", "200", "400", "700"],
display: "swap",
});
after adding display: "swap", it started working.
87
answered Sep 13 '25 03:09
in globals.css
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');
/* From Public Directory */
@font-face {
font-family: 'Kurale';
src: url('/fonts/Kurale.ttf');
font-style: medium;
font-weight: normal;
font-display: swap;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
