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

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("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";
}

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