The Slides generator offers the following control that you can use to select the fonts that will be used on your website. You can select a font or a font pairing from the available presets:
Or you can set your own font or font pairing:
After exporting the template’s code, you can still modify the fonts used. This guide will show you how.
We’ll start by looking at how to use two popular font libraries – Google Fonts and Adobe Fonts – before going through how to apply your selected font to your template. If you already have your selected font, you can skip to the section where we apply it to the template.
Using Google Fonts
After identifying a font that you want to use on Google Fonts, select the various weights and styles that you’ll want to use on your Slides template with the + Select this style button next to the styles.
Each font style that you select will appear on a panel on the right side of the page. You can add and remove styles from your selection.
If you want to use more than one font on your website, you can browse/search Google Fonts, identify the other font you want to use and add its styles to your selection.
When done selecting your fonts, select the Embed tab on the right panel to get a link that you’ll use on your template. If you had selected multiple fonts, they will all be added to one link.
You can now skip to the section where we’ll apply the font to the template.
Using Adobe Fonts (formerly Typekit)
If you are using Adobe Fonts, first identify the font you want to use and click the </> Add to Web Project button at the top of the font’s page to add it to a web project.
In the Add fonts to a Web Project window that appears, name your web project and select the various weights and styles for the font that you want to make available to your template.
After selecting the various font weights and styles, click the Create button to create the web project and you’ll be shown a window with a link that you’ll use in the next section. You can add more fonts to the web project and they will all be linked to with one URL.
Apply the Font to Your Template
To change the fonts used in your template, you’ll have to make a few changes to the template’s HTML file.
If you take a look at the file, you’ll see the font(s) used. Below is an example from a template that uses one font:
<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Material+Icons&display=swap"/>
<style>
.slides { font-family: 'Inter', sans-serif; }
</style>Below is an example from a template that uses one font, but specifies different weights for different types of text.
<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Nunito:wght@100;300;400;500;600;800&family=Nunito:wght@300&family=Nunito:wght@600&family=Material+Icons&display=swap"/>
<style type="text/css">
.slides,
.slides p {
font-family: 'Nunito', sans-serif;
font-weight: 300;
}
.slides h1,
.slides h2,
.slides h3,
.slides h4,
.slides h5,
.slides h6 {
font-family: 'Nunito', sans-serif;
font-weight: 300;
}
.slides .button,
.slides .slides-form {
font-family: 'Nunito', sans-serif;
font-weight: 600;
}
</style>Below is an example from a template that uses two fonts (Playfair Display for headings and Lato for the rest of the text).
<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;500;600;800&family=Playfair+Display&family=Material+Icons&display=swap"/>
<style type="text/css">
.slides,
.slides p {
font-family: 'Lato', sans-serif;
font-weight: 400;
}
.slides h1,
.slides h2,
.slides h3,
.slides h4,
.slides h5,
.slides h6 {
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
}
</style>To change the font used in your template you’ll have to replace this.
First add in the link to the font(s) that you got from Google Fonts or Adobe Fonts:
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;800&family=Montserrat:wght@200&family=Montserrat&family=Material+Icons&display=swap"/>Then add in the CSS that will make use of the font:
<style>
.slides { font-family: 'Montserrat', sans-serif; }
</style>If you want different weights for different text types, you can specify this. The following uses different weights on forms, headings and paragraphs. Play around with the different weights to get the look that you prefer.
<style type="text/css">
.slides,
.slides p {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
}
.slides h1,
.slides h2,
.slides h3,
.slides h4,
.slides h5,
.slides h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 200;
}
.slides .button,
.slides .slides-form {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
</style>Note:
The Slides template uses Material Design Icons for some of its icons. The icons are imported with the same link that imports the font, e.g.
<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;500;600;800&family=Playfair+Display&family=Material+Icons&display=swap"/>
If you decide to replace the default font with another one, remember to add in a link to the icons, otherwise the design of your site will break.
<link rel="stylesheet" href="https://use.typekit.net/omp3jcu.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
When using Google fonts, you can add a separate link as shown above, or you can combine the two since Material Design Icons are also made available via Google Fonts.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Material+Icons&display=swap"/>