# Customizing Fonts

The templates uses 3 font families 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=Oswald:500%7CPoppins:200,300,300i,400,400i,600,600i%7CMaterial+Icons"
  />
  ...
</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 It allows to convert your custom fonts to web-compatible format and generate the required files.

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

# ▶️️️️️ Step 2.

Open main stylesheet file 📄css/main.css and put the correct names for your new fonts. You can use Find and replace function to replace default Poppins and Oswald strings

# ▶️️️️️ Step 3.

Open main JavaScript file 📄js/components.js and adjust typography array in window.theme object:

...
/**
 * Default Theme Options
 * Used to prevent errors if there is
 * no data provided from backend
 */

if (typeof window.theme === 'undefined') {
	window.theme = {
		typography: {
			fontPrimary: 'Poppins',
			fontSecondary: 'Oswald'
		},
		smoothScroll: {
			damping: 0.08,
			renderByPixels: true,
			continuousScrolling: false,
			plugins: {
				edgeEasing: true
			}
		}
	}
}
# Example 3.1
...
	window.theme = {
		typography: {
			fontPrimary: 'Roboto',
			fontSecondary: 'Prata'
		},
    ...
	}

# Troubleshooting

The fonts loading strategy is render-blocking in template. If the fonts declared to load fail – the script will throw an error preventing all the further code to load (including images lazy loading, animations, etc). This is required for correct texts split and further on-scroll animations applied to the text lines.

If you experience any issues with the template after the fonts customization, please check your browser's console.

Error

Font Observer: There is an error occured while loading one or more fonts.
Uncaught (in promise) true

If you're getting this kind of errors, please double check your fonts linking and names starting from the first step in this guide. Also please mind even the small difference in font names, e.g. OpenSans and Open Sans are considered as different fonts.