I am trying to load the local font 'Stigfier' through my 'styles/styles.css' global css and it is not loading. My google fonts loaded in the '_document.jsx' work fine.
@font-face {
font-family: Stigfier;
src:
url('/../public/fonts/stigfier/Stigfier.woff') format('woff'),
url('/../public/fonts/stigfier/Stigfier.woff2') format('woff2'),
url('/../public/fonts/stigfier/Stigfier.ttf') format('truetype'),
url('/../public/fonts/stigfier/Stigfier.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: Stigfier;
}
But it is not loading, same with the recommended way in the Nextjs website docs:
import localFont from '@next/font/local'
const stigfier = localFont({src: '/../public/fonts/stigfier/Stigfier.woff2'})
export default function MyApp({ Component, pageProps }) {
return (
<div className={stigfier.className}>
<Component {...pageProps} />
</div>
)
}
and even creating a link in the '_document.jsx' like so:
<link
rel="preload"
href="/../public/fonts/stigfier/Stigfier.ttf"
as="font"
type="font/ttf"
crossOrigin="anonymous"
/>
CodePudding user response:
As your fonts are already in the public folder you do not need to specify it.
@font-face {
font-family: Stigfier;
src:
url('/fonts/stigfier/Stigfier.woff') format('woff'),
url('/fonts/stigfier/Stigfier.woff2') format('woff2'),
url('/fonts/stigfier/Stigfier.ttf') format('truetype'),
url('/fonts/stigfier/Stigfier.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: Stigfier;
}```
CodePudding user response:
In next/font/local, with src you need to add other properties like weight, display and subset. also make sure you are working on next 13, because next/font is a new feature which comes under nextjs 13.
read this: Nextjs 13 features