Custom Fonts (Pro)

Slides includes a number of preset font options but we also allow you to use custom fonts from Typekit, Google Fonts or even your own host.

How to use fonts from Typekit/Google
1. Open the CSS editor
2. Click the "T" symbol in the top right:

3. Select which fonts to load in the popup. To load a kit from Typekit, simply enter your kit ID. If you want to use font families from Google Fonts we'll auto-complete the font name as you type.

4. Apply your font family to the content you want using CSS:

Here's an example where a custom font called "Lobster" is applied to all headings and "Open Sans" is used for body text:
// Use the "Lobster" font for all headings
.slides h1,
.slides h2,
.slides h3 {
    font-family: "Lobster";

// Use "Open Sans" for body text
.slides {
    font-family: "Open Sans";
Typekit font names
If you're loading fonts from Typekit you'll need to open the kit configuration on the Typekit site to locate your font name(s). These names aren't always predictable – for example, if you're using Fira Sans the name may be something like "fira-sans-2". You can learn more about how to locate your Typekit CSS font names in the following article:

How to use fonts from another host
1. Open the CSS editor
2. Define your font using @font-face and apply it to the content, for example:
// Include a custom font
@font-face {
  font-family: "Cabin Sketch";
  src: url("") format("woff"),
      url("") format("truetype");

.slides h1, .slides h2, .slides h3 {
    font-family: "Cabin Sketch";


Note that custom fonts are always loaded from a third party server and will not work when presenting offline from a ZIP or Dropbox export. They will work offline when exporting to PDF, though.

Feedback and Knowledge Base