Asli

# Fonts

The template uses the Nunito Sans (opens new window) font family served from Google Fonts (opens new window) and a locally-hosted Butler (opens new window) family.

# ▶️ Step 1.

You'll need to customize the following line in all the template HTML files first.

<head>
  ...
  <link
    href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
    rel="stylesheet"
  />
  ...
</head>
# Example 1.1 Choosing another Google Font
<link 
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap"
/>
# Example 1.2 Using self-hosted fonts
<!-- Remove or comment out the original font URL -->
<!-- <link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
  />
-->

<!-- Your CSS file which contains the font links -->
<link 
  rel="stylesheet" 
  href="css/custom-fonts.css"
/>

TIP

There is a handy free online tool called Transfonter (opens new window). It allows you to convert your custom fonts to web-compatible formats and generate the required files.

After the conversion, don't forget to check the font links in the generated CSS file before using it in the template.

# ▶️ Step 2.

Open the main stylesheet file 📄 css/main.css and put the correct name for your new font in the CSS variables of the :root selector:

:root {
  ...
  --font-primary: "Nunito Sans", sans-serif;
  --font-secondary: "Butler", serif;
  ...
}
# Example 2.1


 




:root {
  ...
  --font-primary: "Roboto", sans-serif;
  --font-secondary: "Butler", serif;
  ...
}

← Typography →