## Adding fonts to your site
URL: https://hub.jkdevstudio.com/knowledge-base/jkd-toolkit/adding-fonts-to-your-site
Updated: 2026-09-06
Summary: Add fonts to a WordPress theme: the WordPress library, the theme library with Google, Adobe Fonts and uploads, per-family weights and subsets, and local serving.
Two font libraries work at the same time on your site: the one WordPress ships, and the one the theme ships. **The theme does not replace or block the WordPress one**, and both are always offered in every font picker.
That is worth saying first, because most themes do not work this way.
**The usual arrangement is a dropdown, not a font system.**
Most themes hand you a Customizer select with a few hundred Google families in it, wired straight to `fonts.googleapis.com`: no library to curate, no control over weights or subsets, no local serving, and the WordPress font library sitting there ignored. It was a reasonable thing to build in 2018.
What you get here is a library you curate, control over exactly which weights and character sets load, and a switch that serves the files from your own domain.
## Where the fonts screen is
**Theme panel > Fonts**, which opens on five tabs: Library (what your site has), Catalog (what you can add), Uploads (your own files), Providers (where fonts come from) and Settings (how they are served).
Everything below happens on one of those five.
## The sources
:::deflist
System
: The stack already installed on your visitor's device, so nothing has to load at all. Free.
[Google Fonts](https://fonts.google.com/)
: The built-in set works immediately with nothing to configure. The full catalog needs a Google API key, which is free to create and only changes how much of the catalog you can browse.
[Adobe Fonts](https://fonts.adobe.com/) (Typekit)
: Your own Adobe kits, added by kit id. This is where a large share of current premium typefaces live. Pro.
Your own uploads
: Font files you own, stored on your site and served from it. Pro.
[The WordPress Font Library](https://wordpress.org/documentation/article/font-library/)
: Whatever you added under Appearance. The theme reads it live and shows those families as their own group in every picker, so nothing you add there is hidden by us.
:::
The honest reason to use the WordPress library for some of your typography: **fonts added there stay with the site if you ever change theme.** They belong to WordPress rather than to us.
## Adding a font
Open the **Catalog** tab, pick a source, find the family, add it. It lands in your **Library** and becomes available in every font picker on the site.
Adding a font makes it available. Applying it happens in the typography settings, and that gap is the single most common reason for "I added the font and nothing changed".
## Loading only the weights and character sets you need
This is the part worth ten minutes, because it is where the weight of your pages is decided.
A family on Google can carry nine weights, two styles and five character subsets. That is roughly ninety files, and almost every site uses four of them.
In the **Library** tab, the **Edit** button on a family opens exactly that choice:
:::deflist
Variants
: Every weight and style the family offers, as chips. Turn off the ones your design does not use. Headings at 600 and body at 400 is a normal, honest selection. At least one has to stay on.
Subsets
: The character sets. **Latin alone is a fraction of the download of latin plus Cyrillic plus Greek**, and if your site is not written in those alphabets you are paying for them on every page load.
:::
A family with nothing selected loads everything, which is the default and the reason a fresh library feels heavier than it needs to be. What you turn off stays visible as an inactive chip, so nothing is hidden and you can put it back later.
The selection is not cosmetic: it is what the theme emits, and with local serving on it is also what gets downloaded to your server.
## Removing a font
The **Remove** button on a Library row takes the family out. Anywhere it was in use falls back to the default font, so remove a family after you have moved your typography off it rather than before.
Uploaded fonts are removed the same way, and their files go with them.
## Connecting a provider
The **Providers** tab is where credentials live. A saved credential is validated immediately: the theme calls the provider with it and only stores it if the provider answers, so a bad key fails at the moment you paste it rather than silently later.
:::steps
### Google API key, for the full catalog
Create a key in the [Google Cloud console](https://console.cloud.google.com/apis/credentials) and enable the **Web Fonts Developer API** on the same project. [The Google guide to that API](https://developers.google.com/fonts/docs/developer_api) walks through both steps. Paste the key into the Google card. Without a key you still get the built-in set and self-hosting; the key only widens what the catalog can show you.
### Adobe Fonts kit id
In your [Adobe Fonts account](https://fonts.adobe.com/my_account/web_projects), open the web project you want and copy its kit id, which looks like `abc1xyz`. Paste it into the Adobe Fonts card. The families published in that kit then appear in the catalog.
:::
**A kit id is site specific, so it does not travel with an export.**
Moving a site carries the library as a list of families rather than as files. Google and system families resolve on the new site immediately. An Adobe family stays Unavailable until the new site has its own kit configured, and uploaded files do not travel at all.
## Refreshing the catalog
Provider catalogs are cached on your server for a day, so the catalog stays fast instead of calling Google or Adobe on every page of the admin.
That cache is also why a font you just published in an Adobe kit, or a family added after you saved an API key, is not in the list yet. The **Refresh** button on the Catalog tab clears it and reads the provider again.
The WordPress Font Library is exempt: it is read live every time, because WordPress already keeps it current and a stale copy would leave a deleted font in your pickers.
## Serving fonts from your own domain
The **Settings** tab holds three things worth knowing.
**Load fonts locally** downloads the font files into your uploads folder and serves them from your site. No request leaves your visitor's browser to a font server. This is the setting that answers the GDPR question below.
**Pre-load local fonts** tells the browser to fetch the first weight it will need before it has parsed the stylesheet. It aims at one thing: the flash of a fallback font on first paint. It needs local serving turned on, and it does not apply to uploads.
**Clear the local fonts cache** deletes the stored files. The next page view downloads them again, which is what you want after a provider updates a family.
A large family does not download in one go. The theme fetches what it can inside a few seconds, then finishes the rest on a scheduled job, and serves the font remotely in the meantime. Nothing hangs and nothing waits on it.
## What else the library does for you
Only the families a page actually uses are loaded. The theme keeps an index of which font is referenced by which setting, so a family sitting unused in your library costs nothing.
Style kits install what they need. Switching a ready made typeface pairing in the Customizer adds any missing family as part of the switch.
The library travels with your content, coming across with a [demo import](https://hub.jkdevstudio.com/knowledge-base/setup-guide/how-demo-import-works) and with a settings export, rather than being re-added by hand after a move.
**Do not attach a font by hand in custom CSS.**
A font declared in [custom CSS](https://hub.jkdevstudio.com/knowledge-base/customization/where-to-put-custom-css-and-javascript) bypasses both libraries, which means it never reaches the block editor. Your admin then renders in a different typeface from your site, and the mismatch is genuinely unpleasant to debug six months later.
## Common questions
Do self hosted fonts help with GDPR?
Yes, and it is the reason the setting exists: a font loaded from Google is a request from your visitor's browser to a Google server carrying an IP address, which is what German courts have taken issue with, and turning on **Load fonts locally** serves the files from your own domain so no third party sees the visitor at all. The longer version, including what else on an ordinary page is quietly doing the same thing, is here: The quiet cost of Google Fonts
A font does not load on the front end
Clear any page cache first, since fonts are referenced from generated CSS and a cached page still points at the old file, then check that your uploads folder is writable because both local serving and uploads write there and the [diagnostics screen](https://hub.jkdevstudio.com/knowledge-base/jkd-toolkit/system-info-and-diagnostics) reports on it. An Adobe family that reads as Unavailable usually means the kit id is missing or belongs to another site, and a heavy family with local serving on may be served remotely for the first few page views while the files finish downloading in the background, which settles on its own.
My font is in the library but not applied anywhere
Adding a font makes it available and the typography settings are what apply it, so the family is waiting in every picker on the site rather than missing.
Where are uploaded fonts stored?
Under your WordPress uploads folder, in the theme's own directory, which is why that folder has to be writable, and locally cached Google files live in the same place.
Will my fonts survive a theme change?
Fonts added through the WordPress library will, because they belong to WordPress, while fonts added through the theme library belong to the theme and travel only as far as a settings export carries them. That export holds the library as a list, so Google and system families resolve on the new site immediately, an Adobe family needs the target site to have its own kit, and uploads do not travel at all. See [what survives a theme change](https://hub.jkdevstudio.com/knowledge-base/migration/what-survives-a-theme-change).
Do I need the Google API key?
No. The built-in Google set works with no key and can be self-hosted like any other family, and the key only widens how much of the Google catalog you can browse in the Catalog tab.