## Typography & Fonts

Product: Elisen – Blog & Magazine WordPress Theme
URL: https://hub.jkdevstudio.com/docs/elisen/installation/typography-fonts
Updated: 2026-09-06
Summary: Add Google Fonts, Adobe Fonts, or your own font files to Elisen through the built-in fonts library, including the API step that trips most people up.

Fonts are managed in the built-in fonts library, which supports three sources:

1. **Google Fonts**
2. **Adobe Fonts (Typekit)**
3. **Custom fonts** you upload

## Google Fonts

The theme ships with a local copy of the Google Fonts list, so you can pick a font without any API key. A key is only needed to fetch fonts Google released after the last theme update.

:::steps

### Open the fonts library

Go to [[Elisen Dashboard > Fonts Library]].

### Add fonts

Press the **Google** button and pick what you need. Search, sort and filter work on the full list.

### Apply the font

In [[Appearance > Customize > Theme Options > Typography]], set it as the heading or text font.

:::

<div data-callout="success">

The font is live on the site. If it does not change, clear your caching plugin.

</div>

### If you want the newest fonts, add an API key

A Google API key by itself is not enough. The key needs the font service enabled on it, and this is the step that empties the font list when it is missed.

:::steps

### Create the key

Follow Google guide to [creating an API key](https://support.google.com/googleapi/answer/6158862?hl=en).

### Enable the Web Fonts Developer API on it

In the [Google API Console](https://console.cloud.google.com/apis/dashboard), open **Library**, search for **Web Fonts Developer API**, and enable it for the project the key belongs to.

### Add the key and regenerate

Paste the key in [[Elisen Dashboard > Fonts Library]] and press **Regenerate Google Fonts**.

:::

<div data-callout="warning">

An invalid key replaces the local font list with an empty one on save. If the list goes empty, clear the key field and turn off **Cache requests** to bring the local list back.

</div>

## Adobe Fonts

Adobe Fonts needs a token and an active Adobe subscription for paid families. Generate a token on [your Adobe API tokens page](https://fonts.adobe.com/account/tokens), paste it into the fonts library, then press the **Typekit** button to pick from your kits.

## Custom fonts

Press the **Custom** button and add one variation per weight and style you need. Each variation takes a name, a weight, a style, a display value, and the font file.

<div data-callout="note">

Upload every weight you plan to use. A missing weight makes the browser synthesize it, which is why a custom font sometimes looks heavier or more slanted than expected.

</div>

If Elementor overrides your choice, turn off its default fonts as described in the [Elementor settings](https://hub.jkdevstudio.com/docs/elisen/integrations/settings) article.