Fonts are one of the friendlier design jobs an owner can take on. Nothing about your content changes, every step can be reversed, and the difference shows the moment you save. The hard part is usually finding where your theme hides the setting.
Where you change fonts in WordPress depends on the kind of theme you have: the Styles panel and Font Library in a block theme, the Customizer in a classic one, or the global settings of a page builder. All three are covered below, followed by choosing fonts people can actually read and what to do when a change refuses to show.
First, find out where your fonts are set
Hover over Appearance in the dashboard menu.
- If you see Editor, you have a block theme. Fonts live in the Styles panel of the Site Editor.
- If you see Customize, you have a classic theme. Fonts, if the theme offers them, are somewhere in the Customizer.
- If your pages open in Elementor or another builder, the builder may set its own fonts on top of either, and those win inside its layouts.
Not sure what any of this means for your site? Our introduction to WordPress themes explains block and classic themes in a few minutes.
How to change fonts in WordPress with a block theme
- Go to Appearance → Editor and choose Styles. Depending on your WordPress version, the panel opens straight away or after you click the pencil (edit) icon.
- Open Typography. You will see the elements you can style, typically Text, Links, Headings, Captions and Buttons.
- Click Text to set the body font. Choose a font family, then size, line height and weight.
- Go back and click Headings. You can set all headings at once, or pick H1, H2 and so on separately.
- Click Save. The change applies across the whole site, except where a block has its own font set.
The font list only shows fonts your theme includes or that you have added. To use something new, you need the Font Library.
Adding a font with the WordPress Font Library
Recent versions of WordPress include a Font Library inside the same Typography panel: look for the fonts list at the top and the Manage fonts or Add fonts option. The newest releases also give it a screen of its own at Appearance → Fonts. That menu item appears on classic themes too, but a classic theme only uses fonts installed there if it was built to read them, and many older ones are not.
- Open the font manager from the Typography panel.
- To use a font file you already have, open the Upload tab and add the web font files, usually in WOFF2 format.
- To use Google Fonts, open the Google Fonts tab. WordPress asks for your permission to connect to Google Fonts before it shows the collection.
- Pick the font, then tick only the weights and styles you need, such as regular, italic and bold.
- Install, close the manager, and select the new font for Text or Headings as above.
Fonts installed this way are saved to your own site, so visitors’ browsers load them from your server. Each extra weight is another file to download, which is why it pays to be choosy.
Changing fonts in a classic theme
Open Appearance → Customize. The font controls are usually in a section named Typography or Fonts, and where that sits depends on your theme. Astra, for example, keeps it under Global, and GeneratePress has a Typography section of its own, though theme updates do move these things around. Other themes put fonts on a separate options page under Appearance.
Inside, you normally choose a body font, a heading font, and sizes for desktop, tablet and phone. The Customizer previews each change live. Nothing is saved until you click Publish, so you can experiment freely and close the panel to abandon the changes.
Some classic themes, especially older ones, have no font options at all. You then have two options: a fonts plugin that adds typography controls, or a few lines of CSS, which our guide to adding custom CSS safely walks through.
Page builders: set fonts once, globally
Elementor and similar builders let you set fonts per widget, which is how sites end up with seven slightly different heading styles. Use the builder’s global or site settings instead, define a body font and heading fonts there, and let widgets inherit them. Our post on working with Elementor pages shows where those settings are. If the builder sets fonts, changing them in the theme will not affect builder pages, which is a common source of confusion.
Choosing fonts people can read
Typography is only one part of a site you look after; our owner’s handbook on how to manage a WordPress website covers the rest. For fonts themselves, a few habits matter more than the exact typeface:
- Two families at most. One for headings, one for body text, or a single family in different weights. More than that looks untidy and slows the page.
- A plain body font. Decorative and script fonts belong in a logo or a large heading, never in paragraphs.
- Do not shrink the text. If anything, body text on business sites is more often too small than too large. Check it on a phone held at a normal distance.
- Leave room between lines. Tight line height makes long paragraphs hard going. Your theme’s default is usually a sensible starting point.
- Check the characters you need. If you write in Hindi, Bengali, or a European language with accents, or show the rupee sign, make sure the font includes those characters. Missing ones fall back to another font and look patchy.
- Match your brand, not a trend. If your printed materials use a particular typeface, use it or a close web equivalent online.
Fonts and page speed
Every font weight is a file the browser downloads before text appears in that font. Keep weights to the ones you use. If your theme or a plugin still loads fonts from Google’s servers, our separate guide on hosting Google Fonts locally covers moving them onto your own site.
When the new font does not show, or you want the old one back
If the change looks right in the editor but not on the live site, clear your caching plugin and your host’s cache, then reload in a private browser window. If only some pages ignore it, a page builder or a block-level font setting is overriding the global one. If text appears as squares or in a plain fallback font, the font file is failing to load, which our post on fonts and icons going missing deals with.
To undo in a block theme, open the Styles panel’s revisions and restore an earlier saved version, or use the panel’s menu to reset styles. In a classic theme, set the fonts back by hand, so note your theme’s original choices before you start.
Frequently asked questions
Can I use the font from my company’s brand guidelines?
Only if its licence allows use on a website. Many commercial fonts are sold with separate desktop and web licences, and a desktop licence for print work does not cover your site. If you have a web licence, you can upload the web font files through the Font Library or a fonts plugin. Otherwise, choose a free font that looks similar.
Why does my font look different on an iPhone than on my laptop?
Usually because the font is not loading on that device and the browser is using a fallback. Some themes also use a system font stack on purpose, which shows each device’s own default font. Browsers draw text slightly differently too, so small differences in weight and spacing between devices are normal.
Will changing the site font change my old blog posts?
Yes. A site-wide font setting applies to all existing posts and pages at once, which is the point of setting it globally. The exception is text where someone chose a font on an individual block or in a page builder widget. Those keep their own setting until you clear it.
Should I use a different font for buttons and menus?
Rarely. Buttons and menus usually read best in your body or heading font, perhaps in a bolder weight or capital letters. A third font just for buttons adds another file to load and makes the site look less consistent. Change the weight or size first and see if that gives the emphasis you want.
Fonts that keep coming back no matter what you set usually mean a plugin, a builder or old CSS is fighting the theme. Tracing that kind of tangle is everyday work for our WordPress support service.
Next in this series: How to Change Colors in WordPress: Palette and Blocks
