Apply CSS in next.js with the local asset; use CSS font-face property
to add CSS. Inside font-face CSS property, you pass folder path with
exact extension. Now your font is ready to use inside your next js.
@font-face {
font-family: 'OpenSans';src: url('../asset/OpenSans/OpenSans-Light.ttf');
src: url('../asset/OpenSans/OpenSans-Medium.ttf');
font-weight: 400;font-style: normal;
}
Use Font in CSS
h1, h2,h3 {font-family: OpenSans, sans-serif;font-weight: 400;}
To apply Font on HTML, you use the font-family CSS property to add a font in your next.js.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head><link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@200;300&family=Montserrat:wght@300;400&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Before using the CSS Font-faces property, check the CSS browser support compatibility. Then use it inside the Next.js app.
Use the CSS import method.
CSS provides in build @import property to add a font to your project, and you do not need to import the head component in Next.js. For this example, I use nuito font for the Next.js app.
0 Comments