How to Upload a Font in WordPress: The 2026 Guide

Learning how to upload a font in WordPress takes about five minutes once you know which route your site supports. Since WordPress 6.5, block themes ship with a built-in Font Library that accepts font files directly from the Site Editor, and classic themes can still use a plugin or a manual @font-face rule. Below we walk through every method, the file formats worth uploading, and the performance side that most tutorials skip.

The short answer

There are four practical ways to add custom fonts to a WordPress site in 2026, and the right one depends on your theme.

• Font Library (Site Editor): best for block themes on WordPress 6.5+, no plugin needed.
• Custom font plugin: easiest option for classic themes and non-technical users.
• Manual upload plus @font-face: most control, best performance, requires a child theme.
• Page builder settings: Elementor, Divi and WPBakery each have their own custom fonts uploader.

Whichever route you pick, upload WOFF2 files if you have them. They are roughly 30% smaller than WOFF and supported by well over 95% of browsers in use.

Method 1: Upload a font with the WordPress Font Library

Block themes such as Twenty Twenty-Five include a Font Library that stores uploaded typefaces and makes them selectable in the Styles panel. This is the closest thing WordPress has to a native answer, and it works without touching code.

1. Go to Appearance > Editor > Styles and click the pencil icon to edit styles.
2. Open Typography, then click the three-dot menu next to Fonts and choose Manage fonts.
3. Switch to the Upload tab and drag in your .woff2.ttf or .otf files.
4. Add each weight and style separately (400, 700, italic) so headings and body copy render correctly.
5. Save, then assign the font to Headings, Body or specific blocks under Typography.

The Library tab in the same screen also lets you install Google fonts locally rather than loading them from Google’s servers, which we recommend for privacy reasons covered further down.

Method 2: Add custom fonts using a plugin

If you run a classic theme, a custom fonts plugin is the fastest path. Options like Custom Fonts by Brainstorm Force, Use Any Font, or Fonts Plugin all handle the upload, generate the @font-face CSS and register the family with your theme’s typography controls.

The workflow is nearly identical across them: install the plugin, open its settings screen, name the font family, upload one file per weight, then save. After that the font shows up in the Customizer or your theme’s typography options.

One caveat worth knowing: every extra plugin adds queries and assets to each page load. If you already run a lean stack, the manual method below avoids that overhead entirely, and pairing either approach with LiteSpeed Cache keeps the generated CSS served from cache instead of rebuilt on every request.

Method 3: Upload font files manually (no plugin)

This is the method developers reach for, and it gives you full control over caching headers, preloading and fallbacks. You will need a child theme so your changes survive theme updates.

1. Convert your font to WOFF2 if it is not already, using a tool like the Font Squirrel Webfont Generator.
2. Create a /fonts/ folder inside your child theme directory and upload the files by SFTP or your host’s file manager.
3. Add an @font-face block to the child theme’s style.css, pointing the src at your uploaded file.
4. Apply the family with a CSS rule such as body { font-family: ‘YourFont’, Georgia, serif; }.
5. Clear all caches, then hard-refresh and confirm the file loads in your browser’s Network tab.

The exact syntax for descriptors like font-display and unicode-range is documented in the MDN @font-face reference. Adding font-display: swap is a one-line change that stops invisible text during load, which Google’s Core Web Vitals scoring rewards.

If you deploy theme changes from a repository, this method fits neatly into a version-controlled workflow. Our Git-based WordPress hosting lets you push font files and CSS alongside the rest of the theme rather than editing live.

Related reading: How to Make a Clickable Phone Number in WordPress (2026 Guide).

We cover this topic in more depth in How Do I Upload an HTML File to WordPress? The 2026 Step-by-Step Guide.

For a closer look at this topic, see our guide: How to Transfer Squarespace to WordPress: The 2026 Migration Guide.

Method 4: Custom fonts in Elementor and other builders

Elementor Pro includes a dedicated uploader at Elementor > Custom Fonts. You add a font family, then upload a file per weight and style, and the font appears in every typography dropdown across the builder.

Divi and WPBakery work similarly, with the uploader tucked inside their own theme options rather than the WordPress admin. The trade-off is portability: fonts registered inside a builder usually disappear if you switch builders later, while an @font-face rule in a child theme does not.

Where fonts are stored in WordPress

It depends on how you added them. Fonts uploaded through the Font Library land in wp-content/uploads/fonts/, plugin uploads typically go to a subfolder of wp-content/uploads, and manual uploads sit wherever you put them inside your theme.

Knowing the path matters when you migrate. If you move hosts, confirm the uploads directory transferred intact, since a missing fonts folder is a common reason typography reverts after a WordPress migration. The same applies to any media you have added over time, including PDFs uploaded to your media library.

Self-host Google Fonts rather than linking to them

Loading a Google font by API call sends your visitor’s IP address to a third-party server. A German court ruled in 2022 that doing this without consent breached GDPR, and the safest response is simply to download the font and serve it from your own domain.

Self-hosting is usually faster too, because the browser opens one fewer connection and the font can be cached at the edge with the rest of your assets. If you run a self-hosted WordPress install, you already have everything needed to do this: download the family from Google Fonts, upload the WOFF2 files, and reference them locally.

Keep your font stack fast

Every custom font you add is another render-blocking request, so restraint pays. Most sites need two families at most, and three or four weights total.

• Subset the file to the character ranges you actually use, which often cuts size by half.
• Preload the primary font used above the fold with a link rel=”preload” tag.
• Set a sensible fallback with similar metrics so layout does not shift when the web font swaps in.
• Serve fonts over a CDN so distant visitors are not pulling files from a single origin.

Watch the effect on real users rather than guessing. Bounce and engagement data in your hosting analytics dashboard will show whether a heavier font stack cost you anything measurable.

Why your font change might not be showing

Nine times out of ten it is caching, either your page cache, your CDN or the browser. Purge all three, then load the site in a private window before assuming the upload failed.

Other common causes include a theme stylesheet that overrides your rule with higher specificity, a font uploaded in only one weight so bold text falls back, or a mixed-content block when the font is served over HTTP on an SSL-secured site. Testing changes on a staging copy first avoids surprises, much like you would when duplicating a page before editing it.

Frequently Asked Questions

How do I upload a custom font?

In WordPress 6.5 or newer with a block theme, go to Appearance > Editor > Styles > Typography, open Manage fonts, and upload your .woff2.ttf or .otf file under the Upload tab. Classic themes need either a custom fonts plugin or a manual upload paired with an @font-face rule in a child theme.

How do I import a font in a website?

Use an @font-face declaration in CSS that points to the font file on your server, then reference the family name in your font-family rules. Add font-display: swap so text stays visible while the file downloads, and list at least one system fallback after your custom family.

Where are fonts stored in WordPress?

Fonts added through the Font Library are stored in wp-content/uploads/fonts/, while plugin-based uploads usually sit in their own folder under wp-content/uploads. Manually uploaded fonts live wherever you place them, most commonly in a /fonts/ directory inside your active child theme.

Why can’t I change the font on WordPress?

The most frequent cause is caching, so clear your page cache, CDN and browser cache before troubleshooting anything else. If the font still will not apply, your theme’s CSS is probably overriding it with a more specific selector, or the weight you selected was never uploaded.

Do custom fonts slow down a WordPress site?

Each additional font weight adds roughly 15 to 40 KB in WOFF2 format, so a two-family, four-weight stack typically costs 60 to 150 KB. That is manageable on fast hosting with edge caching, but ten weights loaded from a third-party API can add several hundred milliseconds to first render.

Want fonts that load as fast as they look?

Typography only feels premium when it renders instantly, and that comes down to caching, CDN reach and PHP performance underneath. Take a look at our WordPress hosting plans or talk to a specialist about moving your site across, migration included.