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.



Using 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 domain
If you're loading Typekit fonts make sure that your kit is configured to allow loading from the slides.com and *.slides.com domains.

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: https://blog.typekit.com/2011/06/29/using-typekit-fonts-in-your-own-css/

Using 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("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.woff") format("woff"),
      url("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.ttf") format("truetype");
}

.slides h1, .slides h2, .slides h3 {
    font-family: "Cabin Sketch";
}
Applying fonts with CSS
When applying custom fonts or other CSS styles you'll need to make your selectors specific enough to override Slides default styles. The esiest way to add specificity is to to prepend your selector with ".slides". Here are a few examples of CSS selectors that you can use to target various text:
// Apply font to headings
.slides h1, .slides h2, .slides h3 {
  font-family: "My Custom Font";
}

// Apply font to body text
.slides {
  font-family: "My Custom Font";
}

// Apply font to links
.slides a {
  font-family: "My Custom Font";
}
Presenting offline
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