How to Change the Font in WordPress

Updated October 31, 2026

You don't need a plugin or a line of code to change the font on most WordPress sites anymore. WordPress 6.5 (April 2024) added a Font Library for block themes, and WordPress 7.0 (May 2026) gave it its own page, Appearance → Fonts, that works with block, hybrid and classic themes.

But nearly every "my new font isn't showing" problem comes from skipping half the job. A font has to be on the site before your theme can use it. So there are two steps, always in this order: get the font onto the site, then tell the theme where to use it.

The first step is the same everywhere. The second is where themes differ.

1. Step 1: Add the font
2. Step 2 on a block theme: Styles → Typography
3. Step 2 on a classic theme
4. Elementor: Global Fonts
5. Or ask your assistant
6. What goes wrong
7. Finer points

Step 1: Add the font

Skip this if the font you want already comes with your theme. Most block themes ship several.

WordPress 7.0 and later

1. Go to Appearance → Fonts.
2. The Library tab shows the fonts already registered on your site.
3. To add a Google font, open Install Fonts. WordPress asks for permission to connect to Google Fonts first; allow it, search for the font and install the weights you want.
4. To add your own font files, open Upload and choose them. WordPress accepts .ttf, .otf, .woff and .woff2.

Upload every weight you'll use (Regular, Bold, Italic) together, so they group under one family name.

WordPress 6.5 to 6.9

There's no Fonts page. On a block theme, the same Library, Upload and Install Fonts tabs open from Appearance → Editor → Styles → Typography, using the manage fonts button next to the font list. Classic themes on these versions don't get the Font Library at all, so use your theme's options or the CSS route below.

Step 2 on a block theme: Styles → Typography

1. Go to Appearance → Editor.
2. Open Styles, then Typography.
3. Click Text to set the body font, or Headings for headings. Pick the font, size and weight.
4. Check the preview, then click Save.

That changes the font everywhere the theme uses it. To change one block only, select the block, open the Styles tab in the block's settings and use the Typography panel (if your theme allows font changes per block, you'll see a Font option there).

Prefer a ready-made pairing? Styles also lists your theme's style variations, and many of them swap the fonts along with the colors in one click.

Step 2 on a classic theme

Classic themes don't have Styles, so where you apply a font depends on the theme.

1. First, look in Appearance → Customize. Many popular themes add a Typography panel there with a font picker. If yours does, pick the font and click Publish.
2. If not, use CSS. Go to Appearance → Customize → Additional CSS and add a rule like this, then Publish:

   body { font-family: "Inter", sans-serif; }
   h1, h2, h3 { font-family: "Fraunces", Georgia, serif; }

So far so good. But CSS only names the font; it doesn't put it on the site. If the text falls back to a default font when you check logged out, Step 1 is missing: install the font in Appearance → Fonts (7.0 and later) or use your theme's own font setting, which loads the files for you.

Elementor: Global Fonts

Elementor pages often ignore your theme's fonts, because Elementor sets its own.

1. In wp-admin, go to Elementor → Editor and click Customize under Global Fonts. (You can also get there from Site Settings inside the Elementor editor.)
2. Hover over the font you want to change and click its Edit icon.
3. Pick the new font in its typography settings.
4. Click Save Changes.

Every widget set to use those global fonts changes at once. Widgets that someone styled by hand keep their own font, and you'll have to fix those individually.

Or ask your assistant

Install the font in Appearance → Fonts first. Then hand Step 2, the fiddly one, to Claude or ChatGPT through Kitepod:

On a block theme the assistant changes your global styles, the same settings as Styles → Typography. On a classic theme it uses the theme's Customizer setting or custom CSS. Either way you get a preview link, and the new headings stay off the live site until you publish them.

Open that preview on your phone too; a heading font that looks elegant on a laptop can wrap badly at phone width. Colors work the same way; see changing text color.

What goes wrong

The font isn't in the picker

It isn't on the site yet. That's Step 1: install it in Appearance → Fonts, or upload the files, and it'll show up in Styles → Typography.

Some text still uses the old font

Something more specific is overriding the global setting: a block's own Typography setting, an Elementor widget styled by hand, or CSS in your theme. Find the element in the Site Editor's List View or your builder and reset its font.

The Install Fonts tab is empty

WordPress hasn't been given permission to reach Google Fonts yet, or your host blocks outgoing requests. Allow the connection when asked, or download the files and use Upload instead.

Bold text looks fake or smudged

You installed only the Regular weight, so the browser is faking bold. Install the Bold (700) weight too.

Your custom CSS stopped working after a theme switch

Additional CSS is saved per theme. Copy it across when you change themes.

Finer points

Can I add Google Fonts to WordPress without a plugin?

Yes. On WordPress 7.0 and later, Appearance → Fonts → Install Fonts installs them on any theme type. On 6.5 to 6.9, block themes have the same option under Styles → Typography.

How do I change the font size in WordPress?

Same place as the font: Styles → Typography → Text or Headings on block themes, your theme's typography panel or CSS on classic themes.

Can I use a different font for headings and body text?

Yes, and it's the most common setup. Set Headings and Text separately in Styles → Typography, or as separate global fonts in Elementor.

Will a new font slow my site down?

Each extra weight is another file to download. Two families with two or three weights each is plenty for most sites.

If a font only comes as a single weight, it's a heading font; don't set paragraphs in it.