Breaking News: Grepper is joining You.com. Read the official announcement!

how to use fonts in next js 13

Marwen Labidi answered on January 11, 2023 Popularity 10/10 Helpfulness 4/10

answer how to use fonts in next js 13

how to use fonts in next js 13

Comment

// fron google fonts
import { Ubuntu,Island_Moments} from '@next/font/google'
// const ubuntu = Ubuntu({ subsets: ['latin'] })
const ubuntu = Ubuntu({weight: '400'})
export default function Home() {
return (<h1 className={ubuntu.className}> Home page </h1> );
}
// local fonts 
// import localFont function
import localFont from '@next/font/local'
// config your font 
const openSansExtraBold = localFont({
 src: '../asset/OpenSans/OpenSans-ExtraBoldItalic.ttf' 
})
// use it 
<h1 className={openSansExtraBold.className}> Blog post 1 </h1>

// how to apply them gloablay
We define a CSS variable name inside the font configuration.

// _app.js
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.

/* globals.css */
html, body { 
padding: 0;
margin: 0;
font-family: var(--oxygen-font);
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: fonts javascript next

Link to this answer
Share Copy Link

Contributed on Jan 11 2023

Marwen Labidi

0 Answers Avg Quality 2/10

how to use fonts in next js 13

Contents

More Related Answers

how to use fonts in next js 13

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.