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&amp;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&amp;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>

How to define a google font? ​

How to define a google font?