How to Add Custom Fonts to WordPress

A typeface does more heavy lifting on a website than almost any other design choice. It sets the mood before a single word is read, and it quietly shapes whether long articles feel comfortable or exhausting. The good news is that adding your own fonts to WordPress has never been simpler. Since version 6.5, the platform ships with a native Font Library that handles uploads, storage and local serving for you. But the right method still depends on the kind of theme you run and how much control you want over performance. This guide walks through every practical route, from the no-code panel to hand-written CSS, along with the licensing and privacy points that are easy to overlook.

Which method should you use to add fonts?

There is no single correct answer, only the one that fits your setup. If you run a modern block theme, such as Twenty Twenty-Four or Twenty Twenty-Five, the Font Library is almost always the best starting point because it is built in, self-hosts automatically and needs no plugins. If you are still on a classic theme with a traditional Customizer, the built-in library is not available to you, so you will either write a small @font-face declaration or lean on a plugin. Developers who want full control over subsetting, preloading and file paths tend to prefer the manual CSS route regardless of theme type. Below, we start with the method most readers will reach for first.

How do I add a font with the WordPress Font Library?

The Font Library arrived in WordPress 6.5 and works with block themes. It lets you upload your own font files or browse and install Google Fonts, and in both cases the files are downloaded and stored on your own server rather than being pulled from a third party at page load. That local hosting is the feature that quietly solves a privacy headache we will return to later.

1. Make sure you are on WordPress 6.5 or later and using a block theme. You can check your version under Dashboard → Updates.
2. Go to Appearance → Editor to open the Site Editor.
3. Click the Styles icon (the half-shaded circle), then choose Typography.
4. Under the Fonts heading, click the manage fonts icon (the pencil or the "+" depending on your version), then open the Upload tab.
5. Drag in your .woff2 file, or a ZIP containing several weights and styles. WordPress registers each variant automatically.
6. Alternatively, open the Install Fonts tab to search the Google Fonts collection and install a family locally with one click.
7. Click Save. Your new font now appears in every typography dropdown across the editor, ready to assign to headings, body text or individual blocks.

Behind the scenes, WordPress drops the files into wp-content/fonts/ and wires them into your theme’s settings. If you later switch themes, the uploaded files remain, though you may need to re-select them in the new theme’s styles.

How do I add a custom font with @font-face?

Manual CSS is the most flexible method and the only native option for classic themes. First, upload your licensed font files, ideally in WOFF2 format, to a folder in your child theme, for example wp-content/themes/your-child-theme/fonts/. Then add a declaration to the theme’s style.css or an enqueued stylesheet:

@font-face { font-family: 'Your Font'; src: url('fonts/yourfont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

After that, reference the family wherever you need it, such as body { font-family: 'Your Font', system-ui, sans-serif; }. Always work inside a child theme so a parent-theme update does not wipe your changes, and always include a fallback stack so text stays readable while the custom file downloads. The font-display: swap value tells the browser to show fallback text immediately and swap in your font once it loads, which prevents the dreaded invisible-text flash.

Which approach is right for me?

What about plugins?

If you are on a classic theme and would rather not write CSS, a well-maintained plugin can register fonts through a friendly interface. Look for one that stores files locally rather than calling an external server, keeps its update history current and has a solid support record. Plugins add a small amount of overhead and one more thing to keep updated, so if your theme already supports the Font Library, the native tool is usually the cleaner choice. Reserve plugins for situations where they genuinely save you effort.

Licensing and the Google Fonts privacy question

Two honesty points deserve real attention. First, only use fonts you are licensed to use. Free-for-personal-use is not the same as free for a commercial website, and self-hosting a paid font without a webfont licence can breach its terms. Reputable sources include Google Fonts, which are open source, and licensed foundries where you buy an explicit web licence. When in doubt, read the licence file that ships with the font.

Second, there is a genuine privacy reason to self-host Google Fonts rather than linking to Google’s CDN. When a browser fetches a font directly from Google’s servers, it transmits the visitor’s IP address to Google. A 2022 regional court ruling in Munich, Germany found that embedding Google Fonts this way without consent could violate GDPR, and the case pushed many site owners toward local hosting. Serving the files from your own domain keeps that data on your side and sidesteps the issue. Conveniently, the WordPress Font Library and its Google Fonts installer already download and host those files locally, so you get the compliance benefit automatically.

Getting the performance right

Custom fonts can slow a page if handled carelessly, so a few habits matter. Prefer the WOFF2 format, which is compressed and noticeably smaller than older TTF or OTF files, and only load the weights and styles you actually use rather than a whole family. Keep font-display: swap on your declarations so visitors never stare at blank text. For a font used prominently above the fold, such as your main heading, you can add a preload hint so the browser fetches it early, but preload sparingly, since preloading everything simply moves the bottleneck around. Test with a tool like your browser’s developer panel to confirm the files are cached and served from your own domain.

Frequently asked questions

Do I need to know code to add custom fonts?

No. If you are on WordPress 6.5 or newer with a block theme, the Font Library lets you upload and assign fonts entirely through the editor. Code is only necessary for classic themes or when you want fine-grained control over file paths and loading behaviour.

Why isn’t the Font Library showing in my dashboard?

The Font Library requires WordPress 6.5+ and a block theme edited through the Site Editor. If you are on a classic theme with the old Customizer, the option will not appear. Either switch to a block theme or use the manual @font-face method or a plugin instead.

Is it legal to use Google Fonts on my site?

Yes. Google Fonts are open source and free to use commercially. The main caution is privacy rather than licensing: serve them from your own server, which the Font Library does automatically, so visitor IP addresses are not sent to Google without consent.

Which font format should I upload?

WOFF2 is the modern standard. It is well supported across current browsers and produces smaller files than TTF or OTF, which means faster loading. If you need to support very old browsers you can add a WOFF fallback, but for most sites WOFF2 alone is enough.

Will adding a custom font slow down my website?

It can if you load many weights or pull files from an external server, but a self-hosted WOFF2 file with font-display: swap and only the weights you use has a minimal impact. Preload the one or two fonts that appear above the fold and let the rest load normally.