The Ultimate Guide: How to Change Fonts in WordPress - WatchTowerHQ
how-to-change-font-in-wordpress
24 February 2021

The Ultimate Guide: How to Change Fonts in WordPress

A box of letter stamps demonstrate an unchangeable font.

Font style, size, and color are crucial elements of web design. Fonts are fundamental to readability, accessibility, legibility, and branding. Choosing the right font types and colors in WordPress can make a site appear more professional. Which is why it’s important to know how to change fonts in WordPress.

Besides improved readability and other visitor retention factors, the right font choices allow text to be selectable, searchable, and zoomable. The content appears consistent and sharply rendered regardless of screen size and resolution.

Fonts can be hosted on third-party websites that link to your own. They can also be locally hosted on your website’s servers. Some fonts are designated web-safe, which is a limited range of fonts pre-installed on almost all computers, so you have confidence they’ll display correctly for most users.

Read on to learn more about how to change fonts in WordPress, including tips on optimizing design and performance. 

How to Make Global Changes in Font Size and Style 

Why would you want to change your font style and sizes?

  • To grab users’ attention
  • To emphasize specific content
  • To make it easier for users to read or skim content

Any changes to your website’s appearance should be done to make it easier for users to consume the content and bring attention to particular items.

The method for making global font changes in WordPress depends on whether your theme is block-based or non-block-based. 

For block-based themes, use the Global Styles option in the WordPress blog editor. For non-block-based themes, customize the font by going to My Site —> Design —> Customize —> Fonts.

Change Font Options Within a Theme

The options to change font style and size vary from theme to theme. Some themes allow easy font changes across the site, while others limit changes for simplicity. For instance, default themes tend to be more conceptual in design and are best used for simple sites that may not be “business-ready.”

Premium themes can offer a full range of easily accessed fonts with a variety of applications. Many contain a way to access the entire library of Google fonts.

Fonts are set in pairs — one set is reserved for headings while the other is reserved for the base or body text.

Global Styles (mentioned above) is one method of changing fonts within a theme.

  • Add a new page or click on an existing page title to open it in the block editor.
  • In the editor, click the Global Styles button — the “A” button located between Document Settings and Jetpack.
  • Click the dropdown menu under Headings or Base Font, whichever you’re modifying. The menu offers available font options.
  • Once you make your modifications, select Publish to save the new pairings or Reset to revert to the previous version of the page.

Note: Selecting Publish does not publish the specific page you’re modifying — it just saves your font changes.

The block editor allows you to change the font size within individual blocks.

  • Change the heading font size by selecting H1, H2, H3, etc., in the heading block.
  • Change base or body font size by selecting the Typography option in Block Settings. 
  • Modify paragraphs, buttons, and other text blocks to a preset size or type in a custom font size.

To use Customizer to change fonts, go to Appearance —> Customize to access the curated WordPress collection of free Google fonts.

  • Click on the Fonts option in the Customizer.
  • Click on the dropdown menu under Headings or Base Font to view available font options.
  • Select Headings or Base fonts.
  • Modify font style by clicking the option below and to the left of the font. The available styles depend on your chosen font.
  • Modify font size by clicking the size options below and to the right for each selected font. 
  • Select the desired size from the dropdown menu.

Once you’re satisfied with your selections, click Publish or Save Draft if you wish to continue customizing before publishing. 

Once you select your custom fonts, you can change them as many times as you like.

  • Go to Design —> Customize —> Fonts.
  • Select a different Header or Base font or switch back to the default theme by clicking X to the right of the custom font name.
  • Publish or Save Draft.

To reset your fonts to the theme default, select X next to the current font.

Change Font Options via CSS

If you don’t have the option to use the Customizer, you can make changes by adding custom CSS code to your style sheet. The following steps allow modifications to the paragraph text.

  • Go to the Customizer.
  • Click on the Additional CSS option.
  • Under the Additional CSS text box, add your CSS code. Immediate changes are visible in the preview on the right side of the screen.
  • If satisfied, select Publish at the top of the screen to make the changes live.

To make changes to Headings text, modify the CSS to target the theme’s H elements.

The CSS code will apply only to the theme in use. If you change to a different theme later on, you must copy and paste your custom CSS code into the Customizer again.

Change Font Options via Plugin

Several plugin options exist for WordPress. In Page Builder, popular tools include Beaver Builder and Elementor.

Install and activate dedicated plugins by using the Font Embedding plugin or the Uploader.

The Font Embedding plugin pulls from dedicated font directories such as Google Fonts. A plugin is also available for users of Typekit to access an Adobe subscription font collection. Installing and activating the fonts is similar to using other plugins. You may need to take additional steps to connect your site to the Google or Adobe servers to bypass the processes required to implement the font choices manually.

Uploader provides a tool to upload a specific font to your website and use it like a typeface included in your theme. One plugin choice is Any Font — others include DaFont or MyFonts. 

Besides accessing Google Fonts, you can grab any font family on the web and add it to your site. The plugin integrates with the editor, so you can highlight any section to change the font. You don’t need to pick a master font for the theme — just pick a font as you go.

You also have the option to assign one theme to the entire site and a different theme to specific elements.

The MW Font changer allows you to enable a selection of fonts related to Persian, Arabic, and Latin languages along with fonts for more than 30 different languages.

How to Change Font Size and Style on a Single Page or Post

Perhaps you just want to change the font on a single page or blog post. Doing so can make it easier for the reader to follow your content and make it more search-friendly. 

How to Resize Headers

Font style options are controlled by the theme’s style sheet (style.css). Using a premium WordPress theme, you may have the option to change settings using the Customizer (see above). 

Otherwise, insert a header by adding a Header Block.

  • Search for or find Header Blocks in the Common Blocks section of the block editor.
  • The block defaults to Heading 2 (H2), typically used for subheadings. 
  • To change, click on the H2 dropdown menu to select a different size.

Alternatively, you can change blog settings on the right side of the screen, where color can be modified as well.

If you’re using the Classic Editor in WordPress, add headings using the Paragraph dropdown.

  • Highlight the text you want to turn into a heading.
  • Click the Paragraph dropdown.
  • Select the heading size.

The visual editor mode shows all the available items in the Paragraph tab, or you can use a plugin like Tiny MCE Advanced to add, remove, or arrange the buttons shown on the visual editor toolbar. 

As always, you can adjust the theme font size for paragraphs using CSS code.

H1 and H2 Impact on SEO

Search engines give headings more search engine optimization (SEO) weight than paragraph text. To improve your page rankings, use keywords and phrases in your headers whenever possible.

How to Change WordPress Font Colors

Use the Block settings on the right side of the screen to change the header or base text color. In premium themes, you can use the Additional CSS option in the Customizer.

  • Go to the Customizer.
  • Click the Additional CSS tab to access the empty text box to add your own CSS code.
  • Select the element to modify and use a code inspector in the browser to find the current color.
  • Type code into the CSS text box for the element and color you want.

Repeat these steps for each item you want to change. You can also add custom fonts here if desired.

Using Gutenberg to Change Fonts

The Gutenberg text block allows you to edit color and background.

  • Open the block you intend to modify.
  • Click on the Color Settings tab in the Block section on the right side of the screen.
  • Edit the background color and text color for the text block.
  • Click the Advanced tab below the Color settings to add a class to the block. That class can now be used in your style sheet in the Customizer.

Avoid adding too many colors. Most professional websites limit the colors to two. WordPress will warn you if a specific combination of colors affects accessibility.

Using Classic Editor to Change Fonts

Using the Classic Editor:

  • Select the text to change.
  • Change the color using the Text Color editor in the toolbar.

Be conservative in your approach to using text color.

Using Customizer to Change Fonts

The Customizer is the tool of choice if it’s available in your theme. Some themes allow you to target headings, links, and other elements to change their color.

If you target specific elements in the page for a color change and the option is not available for your theme, you can take the following steps:

  • Select Customize —> Additional CSS.
  • Type your custom CSS in the text box. You may need to add more specific CSS code if a simple change doesn’t work.
  • Replace the original color in the code with your selection.
  • Click Publish.

Using the Style Sheet to Change Fonts

You can edit the theme’s style sheet or create a child theme, then change the color code. Be sure your new code overrides the existing styling for the same elements — and any elements that inherit that styling — if you want them to be a different color.

All text will inherit the color of the body element unless you customize the styling for that text. Avoid original code override by placing your code at or near the end of your style sheet.

How to Optimize Fonts for Design and Performance

Any change you make to your website for design purposes can impact its performance visually (aesthetically) and for load time. 

Design Considerations

Too many different fonts and colors can make a webpage appear messy. Before you add or use new fonts on your site, think about this:

  • Are the new fonts consistent in style or mood with your existing fonts?
  • Are the new fonts consistent with your branding? (Here’s the familiar warning not to use Comic Sans. Ever.)
  • Are the text colors already used in the design of your theme, or do they coordinate with it?

If you want to match a font used in print materials but cannot find it as a web font, try finding a close match on Google Fonts. Limit the number of colors you use when modifying text. And if you want a pair of fonts, use a service like FontPair to find two that work well together.

The rule of thumb is to limit yourself to two fonts — one for headings and one for body copy. Limiting the number of fonts reduces the overall number of HTTP requests and ensures a streamlined and consistent design. 

Don’t forget you have other variations to work with — each font typically allows for bold, italic, and other options. Every variation also adds to the file size, however, so avoid adding any you don’t plan to use.

Four font containers are in common use on the internet. 

  • Embedded Open Type (EOT) was designed by Microsoft — but may only render in Internet Explorer browsers.
  • True Type Font (TTF) has partial Internet Explorer support and has been around since the 1980s.
  • Web Open Font Format (WOFF) was developed in 2009 and is Open Type or True Type with compression and additional metadata.
  • Web Open Font Format 2 (WOFF2) reduces WOFF file size by 30%, but may not be supported by all browsers.

The fonts used on your website make an impression on your visitors. Choose wisely to reinforce your brand. 

Performance Considerations When Changing Fonts

Every font you use takes additional resources during download. If it takes a visitor’s machine too long to download your website pages, they may abandon it.

  • Use caching, so pages don’t need rebuilding every time they load.
  • Use web font providers that deliver fonts using a content delivery network (CDN), such as Google Fonts, to speed up font delivery.
  • Use only the fonts you need. Don’t stock up on variations of fonts you won’t be using in your style sheet. You can always add them later if necessary.
  • Make sure to add web fonts properly. 
  • Put in the font request early since @font-face delays font requests by default, slowing page content loading.
  • Be sure your servers provide long-lived, maximum-age time stamps and revalidation tokens to allow efficient font reuse between pages.

Always remember the user experience when selecting font styles, weights, sizes, and colors.

How to Upload Fonts to WordPress

While WordPress has several fonts available, you can upload more.

Add Using WordPress Plugin

The Google Fonts Typography plugin provides access to the complete library of Google fonts. Once they’re uploaded, you can review them in the Customizer. Install and activate the plugin, and you’re ready to go.

  • Go to Appearance —> Customize.
  • Look for the Google Fonts section.
  • Click the link to access settings for fonts and configure them.

You can configure basic or advanced settings and font loading, and perform debugging for fonts that won’t display as expected.

Add New Fonts Manually

If you don’t want an additional plugin, and you have access to the theme code, install and use web fonts by adding code to the functions file and style sheet.

If you bought a third-party theme or are using a WordPress theme directory, create a child theme and give it two files: functions.php and style.css.

  • Link the font by clicking on the plus icon and the tab at the bottom of the screen for your library to find the correct code.
  • Go back to the Embed tab.
  • Enqueue the font by opening the theme’s functions file and add your code in the link from Google.
  • Add the font(s) to the style sheet.

Add a Backup Font

Not all formats or fonts work with all browsers or machines, so be sure to code in a backup. Older devices may not render all web font files. Typically, Google Fonts code provides a backup by specifying serif or sans-serif. If you prefer, you can have the style sheet specify standard fonts like Helvetica or Georgia in place of your font before it defaults to plain serif or sans-serif.

Conclusion

Font selection is an essential element in web design. The style you use sets the tone for your website, and you have the flexibility in WordPress to change the font’s style, size, color, and weight — either globally or for a single page element.

Changing fonts in WordPress is easy with help of the block editor, Customizer, or classic editor. Consider the number of fonts and colors you use to maintain a clean look, and always remember readability, accessibility, legibility, and branding as you design your site.

Book a Demo

Take a deep dive into WatchTowerHQ with a member of our Customer Success Team.

Sign up here