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.
Why would you want to change your font style and sizes?
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.
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.
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.
To use Customizer to change fonts, go to Appearance —> Customize to access the curated WordPress collection of free Google fonts.
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.
To reset your fonts to the theme default, select X next to the current font.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Repeat these steps for each item you want to change. You can also add custom fonts here if desired.
The Gutenberg text block allows you to edit color and background.
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 the Classic Editor:
Be conservative in your approach to using text color.
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:
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.
Any change you make to your website for design purposes can impact its performance visually (aesthetically) and for load time.
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:
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.
The fonts used on your website make an impression on your visitors. Choose wisely to reinforce your brand.
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.
Always remember the user experience when selecting font styles, weights, sizes, and colors.
While WordPress has several fonts available, you can upload more.
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.
You can configure basic or advanced settings and font loading, and perform debugging for fonts that won’t display as expected.
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.
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.
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.
