import { Ubuntu,Island_Moments} from '@next/font/google'
const ubuntu = Ubuntu({weight: '400'})
export default function Home() {
return (<h1 className={ubuntu.className}> Home page </h1> );
}
import localFont from '@next/font/local'
const openSansExtraBold = localFont({
src: '../asset/OpenSans/OpenSans-ExtraBoldItalic.ttf'
})
<h1 className={openSansExtraBold.className}> Blog post 1 </h1>
We define a CSS variable name inside the font configuration.
import "../styles/globals.css";
import { Oxygen} from '@next/font/google'
const ubuntu = Oxygen({
weight: '400',
variable: '--oxygen-font'
})
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
We use the CSS variable name inside the global CSS file.
html, body {
padding: 0;
margin: 0;
font-family: var(--oxygen-font);
}