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 using 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