# Load Google, Adobe, or self-hosted fonts

[Canonical article](https://slides.com/docs/custom-fonts)

Available on: Pro

Slides includes a range of preset fonts, but you can also use custom fonts from Google Fonts, Adobe Fonts (formerly Typekit), or your own host to match your brand or give a presentation its own personality.

<video src="https://static.slid.es/help/custom-fonts-pro/custom-font-2ec1aa89.mp4" width="2556" height="1692" preload="metadata" autoplay muted playsinline loop controls></video>

## Use fonts from Google

Follow these steps to load a Google Font and apply it to your presentation.

1. Open the CSS editor.

2. Select the **Custom fonts** button, represented by a **T** in the upper-right corner.

    <img src="https://static.slid.es/help/custom-fonts-pro/custom-font-trigger-84178bbb.png" alt="Custom fonts button in the upper-right corner of the CSS editor" width="2550" height="1694">

3. Enter the Google Font families you want to load. Slides suggests matching fonts as you type. Select **Save** when you are finished.

    <img src="https://static.slid.es/help/custom-fonts-pro/custom-font-dialog-19cc1c03.png" alt="Load custom fonts dialog with Lobster entered as a Google Font" width="2550" height="1700">

4. Select **Apply custom font** above the CSS editor, then choose the font you want to use.

    <img src="https://static.slid.es/help/custom-fonts-pro/custom-font-insert-step-1-76a74ae0.png" alt="Apply custom font menu with Lobster available to select" width="2550" height="1696">

5. Choose where to apply the font: **Body text**, **Heading 1**, **Heading 2**, or **Heading 3**. You can select more than one option. Select **Apply** to add the required CSS.

    <img src="https://static.slid.es/help/custom-fonts-pro/custom-font-insert-step-2-e3e9f09b.png" alt="Options for applying the Lobster font to body text or heading levels" width="2558" height="1696">

The generated CSS appears in the editor and the presentation preview updates to show the result.

<img src="https://static.slid.es/help/custom-fonts-pro/custom-font-applied-631daf9b.png" alt="Lobster applied to the presentation heading with its CSS visible in the editor" width="2554" height="1696">

Here's an example where a custom font called "Lobster" is applied to all headings and "Open Sans" is used for body text:

```less
// 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";
}
```

## Use fonts from Adobe Fonts

1. Add your font in Adobe Fonts.

    <img src="https://static.slid.es/help/custom-fonts-pro/1.png" alt="Font selected in Adobe Fonts" width="1500" height="1522">

2. Create a new web project.

    <img src="https://static.slid.es/help/custom-fonts-pro/2.png" alt="Creating an Adobe Fonts web project" width="1588" height="1264">

3. Copy the project ID from the embed code.

    <img src="https://static.slid.es/help/custom-fonts-pro/3.png" alt="Adobe Fonts project ID" width="1610" height="1400">

4. Add the project ID in the **Custom fonts** dialog in the Slides CSS editor.

    <img src="https://static.slid.es/help/custom-fonts-pro/4.png" alt="Adobe Fonts project ID field in Slides" width="2244" height="1800">

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

    <img src="https://static.slid.es/help/custom-fonts-pro/5.png" alt="Adobe font-family name used in CSS" width="1190" height="770">

### Allowed domains

Make sure your Adobe Fonts web project allows fonts to load on the `slides.com` and `*.slides.com` domains.

### Font names

To find the name to use in your CSS, open your web project in Adobe Fonts. These names aren't always predictable. For example, Fira Sans may be named something like `fira-sans-2`.

## Use 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 your content. For example:

```less
// 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 allow the files to be loaded from the `slides.com` and `*.slides.com` domains. Browsers block this kind of cross-domain loading by default unless the server permits it through Cross-Origin Resource Sharing (CORS). Learn more about [configuring CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

### Apply 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`:

```less
// 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.