Kinsey

# Customizing Fonts

The template uses the Inter (opens new window) font family served from Google Fonts (opens new window):

# ▶️ Step 1

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

<head>
  ...
  <link
    rel="stylesheet"
    type="text/css"
    href="https://fonts.googleapis.com/css?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap"
  />
  ...
</head>

# Example 1.1: Choosing other Google Fonts

<link 
  rel="stylesheet"
  type="text/css" 
  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 Google Fonts but keep Material Icons -->
<!-- <link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap"
  />
-->

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

TIP

There is a handy free online tool called Transfonter (opens new window) that 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: 'Inter', sans-serif;
  ...
}

# Example 2.1

:root {
  ...
  --font-primary: 'Roboto', sans-serif;
  ...
}

← Contact Form Setup →