# Customizing Fonts

The template uses three font families served from Google Fonts (opens new window):

Raleway (opens new window) – primary font for the main text and subheadings.
Cinzel (opens new window) – secondary font for the headings, menu items, and some decorative elements.
Material Icons (opens new window) – iconic font with a rich set of handy symbols.

# ▶️ 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=Cinzel:400,700%7CRaleway:500,500i,600,700%7CMaterial+Icons&amp;display=swap"
  />
  ...
</head>

# Example 1.1 Choosing other Google Fonts

<link 
  rel="stylesheet"
  type="text/css" 
  href="https://fonts.googleapis.com/css?family=Prata:400,700%7CRoboto:500,500i,600,700%7CMaterial+Icons&amp;display=swap"
/>

# Example 1.2 Using self-hosted fonts

<!-- Remove Google fonts but keep Material Icons -->
<link 
  rel="stylesheet" 
  type="text/css" 
  href="https://fonts.googleapis.com/css?family=Material+Icons&amp;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). 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 names for your new fonts in the CSS variables of the :root selector:

:root {
  ...
  --font-primary: 'Raleway', sans-serif;
  --font-secondary: 'Cinzel', serif;
  ...
}

# Example 2.1

--font-primary: 'Roboto', sans-serif;
--font-secondary: 'Prata', serif;

← Generating Favicon Contact Form Setup →