How to define a google font?
We fully support Google Fonts, and you can easily import them by following the steps below:
jsx
{/* Add class `font-['FONT_NAME']` to outermost div */}
{/* All elements inside this div will use this font */}
<div className="font-['Inter']">
{/* Import the font */}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
/> {/* Remember to close the link tag */}
<div id="header">
....
</div>
</div>
{/* For font names that contain spaces, need to replace all the spaces with underscores */}
<div className="font-['Noto_Sans']">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<div id="header">
....
</div>
</div>
{/* Add class `font-['FONT_NAME']` to outermost div */}
{/* All elements inside this div will use this font */}
<div className="font-['Inter']">
{/* Import the font */}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
/> {/* Remember to close the link tag */}
<div id="header">
....
</div>
</div>
{/* For font names that contain spaces, need to replace all the spaces with underscores */}
<div className="font-['Noto_Sans']">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<div id="header">
....
</div>
</div>