Rubenz

# Customizing Fonts

The templates use 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 (opens new window). It allows you 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 the main stylesheet file 📄css/main.css and put the correct names for your new fonts. You can use the Find and replace function to replace the default Poppins and Oswald strings.

# ▶️ Step 3.

Open the main JavaScript file 📄js/components.js and adjust the typography array in the 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 the template. If the fonts declared to load fail – the script will throw an error preventing all the further code from loading (including images lazy loading, animations, etc). This is required for correct text splitting 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 occurred while loading one or more fonts.
Uncaught (in promise) true

If you're getting this kind of error, 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 different fonts.

← AJAX Transitions →