How to Add Custom Fonts in WordPress and Elementor

Adding custom fonts in WordPress used to mean plugins and code. Today there are three clean options, and one of them is built right into WordPress.

Custom fonts are one of the quickest ways to make a WordPress site look like a real brand instead of a template. The method depends on how your site is built, so pick the section that matches yours.

Which method should you use?

• Block theme (Twenty Twenty-Four, Twenty Twenty-Five and other full-site-editing themes): use the built-in Font Library.
• Elementor: use Elementor's Custom Fonts feature (part of Elementor Pro).
• Classic theme without a page builder: add @font-face to a child theme.

Whatever you choose, upload the WOFF2 version of your font for the fastest loading, and check that your font licence covers web use.

Method 1: the WordPress Font Library (block themes)

Since WordPress 6.5, block themes have a Font Library built in.

1. Go to Appearance → Editor → Styles.
2. Open Typography and click the fonts icon to manage fonts.
3. Choose Upload and add your font files (WOFF2 preferred, TTF and OTF also work).
4. Back in Typography, set the font for headings, text, buttons or links.
5. Save. The font now applies across the whole site.

This is the cleanest method if you use a modern block theme, because WordPress handles the loading for you.

Method 2: Elementor Custom Fonts

1. In the WordPress dashboard go to Elementor → Custom Fonts (requires Elementor Pro).
2. Click Add New and give the font a name, for example "Brand Sans".
3. Click Add Font Variation, choose the weight and style, and upload the WOFF2 file (add WOFF too if you like).
4. Repeat for each weight you need, such as Regular and Bold.
5. Publish the font.
6. Open Site Settings → Global Fonts in the Elementor editor and assign the new font to Primary, Secondary or Text styles.

Using global fonts instead of setting the font on every widget makes future changes much easier.

Method 3: @font-face in a child theme

1. Create or activate a child theme so updates do not wipe your changes.
2. Upload the WOFF2 file to the child theme folder, for example /fonts/brand.woff2.
3. Add this to the child theme's style.css:

@font-face {
  font-family: "Brand Font";
  src: url("fonts/brand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
h1, h2, h3 { font-family: "Brand Font", sans-serif; }

Pick fonts that suit the job

Headings can be expressive; body text should be calm and readable.

• For a clean business or agency site, a modern sans like Know works for headings and text.
• For portfolios and creative studios, try a geometric family like Lenia Sans, which has 18 styles to play with.
• For fashion, weddings or editorial blogs, an elegant serif like Editorial Today for headings.
• For bold landing-page headlines, a condensed sans like Dozed fits big words into small spaces.

Keep the site fast

Every font file is something visitors must download. Load only the weights you actually use, prefer WOFF2 and avoid loading the same font twice (once from your theme and once from a plugin). Our guide to web fonts and website speed has the full checklist.

Troubleshooting

• Font not changing? Clear your caching plugin and browser cache.
• Bold looks blurry? Upload the real bold file instead of letting the browser fake it.
• Upload blocked? Some hosts block font uploads. Elementor's Custom Fonts and the Font Library usually handle this; otherwise upload via your host's file manager.

Which method is best for most people?

If you are building something new, a block theme with the Font Library is the simplest and fastest option, and it needs no extra plugins. If your site already runs on Elementor Pro, Custom Fonts plus Global Fonts keeps everything in one place. The child theme method is perfect for developers and classic themes that you do not plan to change.

Looking for a font for your WordPress or Elementor site? Browse our fonts, and see our Elementor kits and WordPress themes categories for ready-made designs.