Custom fonts

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 Google

Follow these instructions to use a Google font in your presentation.

1. Open the CSS editor

2. Click the "T" symbol in the top right:

1. Select which fonts to load in the popup. We'll auto-complete the font name as you type.

1. 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";
}

Using fonts from Typekit/Adobe Fonts

1. Add your font in Adobe Fonts/Typekit.

1. Create a new Typekit web project.

1. Copy the Typekit ID from inside the embed code.

1. Add the Typekit ID to the Custom Fonts popup in the Slides editor.

1. Apply the font with CSS. Use the font name exactly as shown in step 3.

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

You can load custom font files directly from another domain.

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

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

Server requirements

Externally hosted font files must be served over HTTPS.

The server must also be configured to allow the files to be loaded from the slides.com and *.slides.com domains. Cross domain loading is prevented by default by a mechanism called "Cross-Origin Resource Sharing" (CORS). To learn more about CORS and how to configure it please see this article: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Applying fonts with CSS

When applying custom fonts or other CSS, make your selectors specific enough to override the default Slides styles. The easiest approach is to prefix the selector with .slides:

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

Custom fonts loaded from a third-party server do not work in offline ZIP or Dropbox exports. They are included when exporting to PDF.