There are several ways to change the fonts in WordPress. On the one hand, it is possible to format text blocks or in­di­vidu­al sections in the editor. This is easy, but soon leads to an in­con­sist­ent ap­pear­ance in the long run.

It is better to define fonts for the entire site in the theme. This way, a con­sist­ent and appealing design is main­tained. However, you need admin rights and a bit of expertise to make the changes. We will show you how to change WordPress fonts best.

Cheap domain names – buy yours now
  • Free website pro­tec­tion with SSL Wildcard included
  • Free private re­gis­tra­tion for greater privacy
  • Free Domain Connect for easy DNS setup

Changing the fonts in WordPress

Let’s consider the simplest case of changing the font for an existing WordPress website. Normally, the theme sets a font for all the text. Let’s assume it is a generic sans-serif spe­cific­a­tion. Now we want to change the headings to a serif font. In WordPress, this requires two steps:

  1. Define font for HTML elements in CSS
  2. Include CSS code in WordPress

To define the font for an HTML element, we use the CSS property ‘font-family’. The related ‘@font-face’ is used to define custom fonts.

CSS spe­cific­a­tion Ex­plan­a­tion Example
font-family Set font body { font-family: 'my-custom-font', sans-serif; }
@font-face Define custom font @font-face { font-family: 'my-custom-font'; src: local('my-custom-font.woff2'; }
Note

Among the wide range of devices used to display web content, there are a small set of practical Websafe Fonts. These work almost every­where; however, there are slight dif­fer­ences in ap­pear­ance. To iron these out, you can use so-called CSS font stacks. These are groupings of similar-looking fonts from which the browser selects the first available one.

How do you specify a font for an HTML element in CSS?

First, let’s look at how to set the font for an HTML element in CSS. For our example, we want to use a serif font for the H1 to H6 headings. We use the following code:

h1, h2, h3, h4, h5, h6 {
    font-family: serif;
}

How to include ad­di­tion­al CSS in WordPress?

There are different methods to integrate ad­di­tion­al CSS into WordPress. Which exactly is used depends on how the theme is built. Com­mer­cial themes and page builders often offer a custom setting to include ad­di­tion­al CSS. We’ll show two common methods that work with most standards-compliant themes:

  1. Using the WordPress Cus­tom­izer to include ad­di­tion­al CSS; il­lus­trated with screen­shots.
  2. Including ad­di­tion­al CSS via the functions.php file, ideally in a child theme; the specific procedure is described in our tutorial on editing a WordPress header.
Image: Locate the WordPress Customizer in the dashboard
First, we navigate to the WordPress Cus­tom­izer.
Image: Locate additional CSS in the WordPress Customizer
Next, we click on ‘Ad­di­tion­al CSS’.
Image: Deposit additional CSS in WordPress Customizer
We’ll paste in our CSS code. In the preview on the right, the caption is correctly rendered in Serif.

How to add another font in WordPress?

To add a font to a website a webfont is needed. This can be obtained directly from Google Fonts or a similar platform. To do this, it is suf­fi­cient to include an ad­di­tion­al stylesheet hosted by Google in WordPress. However, there may be privacy concerns with this. Depending on the method used to embed the web font, site per­form­ance may be affected. It is therefore usually prefer­able to host web fonts as part of the theme folder on the WordPress server.

Note

Webfonts are included in a website that requires a special stylesheet in addition to the font files. Platforms like Google Fonts offer stylesheets and font files for download as well as embedding into websites. This is con­veni­ent, but optimal use requires back­ground knowledge and a specific approach. This is because each ad­di­tion­al font is down­loaded by the browser and 'costs' ac­cord­ingly.

How to self-host a web font as part of WordPress?

Hosting web fonts yourself is easier said than done. The best way is to use a spe­cial­ised tool that generates all common web font formats from uploaded font files, including the necessary CSS code. Over the years Font Squirrel has es­tab­lished itself as the standard. Al­tern­at­ively, you can use a plugin like Use Any Font to add a font to WordPress.

Font Squirrel

Image: Upload fonts in the Font Squirrel Webfont Generator
Upload the font files you want to use. Note that the inclusion of a font must be ex­pli­citly allowed by license. / Source: https://www.font­s­quir­rel.com/tools/webfont-generator
Image: Download ready-made web font kit at Font Squirrel
From the uploaded font files a webfont kit is generated for download. This must be in­teg­rated into the theme. / Source: https://www.font­s­quir­rel.com/tools/webfont-generator

Use Any Font

Image: Active ‘Use Any Font’ plugin
After in­stall­a­tion and ac­tiv­a­tion, navigate to the ‘Use Any Font’ plugin in the dashboard.
Image: Generate API key for ‘Use Any Font’ plugin
First, let’s generate a test API key.
Image: Using the ‘Use Any Font’ plugin in WordPress to add a predefined font
Under the ‘Upload Font’ tab, you can add pre­defined fonts to the WordPress site. We filter ‘IBM Plex’ as an example.
Image: Added font in the ‘Use Any Font’ plugin
The added fonts are displayed.
Image: Assigning a font to HTML elements with ‘Use Any Font’ plugin
Under ‘Assign Font’, select the HTML elements you want and specify a font. Behind the scenes, the cor­res­pond­ing ‘@font-face’ CSS statement is generated.
Image: Assigned heading font in the ‘Use Any Font’ plugin
Elements that have been assigned a font are displayed.
Image: Heading font changed using the ‘Use Any Font’ plugin
A first test shows that the plugin works. The headline is displayed in the ‘IBM Plex Mono Light’ font.

What is Icon Fonts all about?

Besides web fonts for dis­play­ing text, there are the popular icon fonts. The glyphs of a font do not have to represent letters. The vectors they contain are simply math­em­at­ic­ally defined shapes. This way, you can also display icons that are often used for social media, for example.

Image: Brand Icons of the ‘FontAwesome’ Icon Font
The brand icons of the popular ‘FontAwe­some’ Icon Font. / Source: https://fontawe­some.com/v6.0/icons/?m=free&s=brands
Note

Caution: Icon Fonts are not to be confused with a website’s time-honored Favicon.

How to use a web font from Google Fonts in WordPress?

In most cases, it is prefer­able to host web fonts yourself. However, there are ex­cep­tions. Perhaps it’s just a matter of trying out a new font on a staging site. Or the site in question is a small blog where per­form­ance is not so important. So we show the required procedure here for the sake of com­plete­ness.

To add a font from Google Fonts to WordPress, follow these steps:

  1. Select the desired font from Google Fonts: Use the search and filter function or go by your own eye.
  2. Select in­di­vidu­al style variants: Keep in mind that each ad­di­tion­al style variant will cause you to download another font file.
  3. Place stylesheet code in WordPress header — as explained in our tutorial on how to edit a WordPress header.
  4. Set font via CSS — either for the whole site or for in­di­vidu­al elements.
Image: Select a font from Google Fonts
We have selected the sans-serif font ‘IBM Plex Sans’ from the ‘IBM Plex’ font family. / Source: https://fonts.google.com/
Image: Select Style Variations on Google Fonts
Next, we select two style vari­ations of the ‘IBM Plex Sans’ font family. We copy the stylesheet code found at . / Source: https://fonts.google.com/
Image: Paste the stylesheet code from Google Fonts into WordPress header
Last but not least, we paste the stylesheet code in the WordPress header. In our example, we used a plugin for this.
Managed Hosting for WordPress
Create your site with AI, we manage the rest
  • Stress-free, no matter your skill level with easy AI tools
  • Full cus­tom­isa­tion with themes and plugins
  • Hassle-free updates and less admin

What methods can be used to include a web font in WordPress?

To summarise, we show common methods that can be used to add a font to WordPress. All of these have their own ad­vant­ages and dis­ad­vant­ages:

Embed webfont Advantage Dis­ad­vant­age
Using a CSS @import statement Simple, supported by Google Fonts; requires access to stylesheet only. Bad for site per­form­ance; may prevent parallel loading of stylesheets.
Including CSS via <link rel="stylesheet">. Simple, supported by Google Fonts; requires access to WordPress headers only; may benefit site per­form­ance if external stylesheet is retrieved from cache. Requires access to theme or WordPress headers; may be bad for site per­form­ance as stylesheet is loaded as a separate resource.
Using webfont plugin Simple; operate from WordPress dashboard; works with fonts that are not publicly hosted. Requires in­stall­a­tion of another plugin; less control compared to manual method and webfont generator.
Including CSS via wp_enqueue_style(). Better site per­form­ance as stylesheets are minimised and con­cat­en­ated. Requires access to theme or functions.php.
Defining a CSS @font-face rule Large degree of control, including FOUT fix. Requires special knowledge.
Creating webfont with a generator and integrate into theme. Works with fonts that are not publicly hosted; greatest degree of control of generated font files and @font-face rules. Generated files must be in­teg­rated into theme and cus­tom­ised if necessary; requires special knowledge.

How to customise the font in WordPress?

So far we have discussed how to change fonts in WordPress. Now let’s look at how to change font size and font colour in WordPress. We are basically using the same procedure that we used to change the font in WordPress:

  1. Locate target element and identify selector.
  2. Prototype CSS rules in the web inspector
  3. Include CSS spe­cific­a­tions in WordPress

Overview of the most important CSS spe­cific­a­tions to change font size and font colour in WordPress:

CSS spe­cific­a­tion Ex­plan­a­tion Example
font-size Set font size p { font-size: 1rem; }
font-weight Set font-weight strong { font-weight: bold; }
colour Set font colour a { color: blue; }

How to change the font size in wordpress

Let’s consider again the simplest case: We want to change the font size of the entire site in WordPress. To do this, we use the HTML root element as a selector with a per­cent­age for the font size. This makes it intuitive to un­der­stand how to change the size:

  • ‘Make font 10% larger’: html { font-size: 110%; }
  • ‘Display font 10% smaller’: html { font-size: 90%; }

Now, how do we go about adjusting the font size of certain elements? Again, let’s take the headings H1 to H6 as an example. First, let’s see how NOT to do it:

h1 { font-size: 35px; }
h2 { font-size: 28px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

Two things go wrong here: First, pixels (‘px’) are used as an absolute unit. Second, the in­di­vidu­al font sizes are ar­bit­rar­ily chosen. The latter leads to an in­con­sist­ent and choppy looking design. Un­for­tu­nately, both ‘anti-patterns’ can be found in many — even com­mer­cial — WordPress themes. It is better to use relative units for the spe­cific­a­tion of font sizes. With the unit ‘rem’ the size spe­cific­a­tions refer to the HTML root element. Ac­cord­ingly, a spe­cific­a­tion of ‘2rem’ means: ‘twice the normal font size’.

The com­bin­a­tion of per­cent­age for the HTML root element and rem for all other text elements is perfect for re­spons­ive design. All you need is a handful of CSS Media Queries for different screen widths that adjust the font size of the HTML root element. All other text elements auto­mat­ic­ally scale with it, keeping their pro­por­tions among them­selves:

/* Mobile-first font size */
html { font-size: 100%; }
/* 'medium' Breakpoint */
@media screen and (min-width: 30em) and (max-width: 60em) {
    html { font-size: 105%; }
}
/* 'large' Breakpoint */
@media screen and (min-width: 60em) {
    html { font-size: 110%; }
}

The question remains, according to what dis­cre­tion one chooses the size values of the in­di­vidu­al text elements. As mentioned above, it is not a good idea to choose arbitrary values. A good approach is to use a ‘ty­po­graph­ic scale’. Ty­po­graph­ic scales are inspired by musical harmonies and are based on math­em­at­ic­al formulas such as the golden ratio. Font sizes staggered according to a ty­po­graph­ic scale exhibit a har­mo­ni­ous ap­pear­ance. Con­veni­ently, gen­er­at­ors that auto­mat­ic­ally generate the required CSS code, are available online. Here we use the ty­po­graph­ic scale of the ‘Tachyons’ framework as an example:

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }
Image: Typographic scale of the ‘Tachyons’ framework
The ty­po­graph­ic scale of the ‘Tachyons’ framework creates a har­mo­ni­ous im­pres­sion. / Source: https://tachyons.io/#style

How to change the font colour in WordPress?

Maybe you already guessed it: To change the font colour in WordPress we don’t simply select all the text on a page and then pick a new colour from a menu. Instead, we proceed ana­log­ously to the font and set the colour via CSS code. Typical for CSS is that there are several methods to achieve a desired result. We cannot go into detail here about all the ways to define colour spe­cific­a­tions in CSS. The following CSS rules are equi­val­ent:

body {
    color: black;
    color: #000000;
    color: #000;
    color: rgb(0, 0, 0)
}

As you can see, to set the font colour for the entire site, we use the HTML body element with the CSS property ‘color’. All other text elements inherit from it. If necessary, we override the inherited colour value for specific classes of elements. For example, to display headings in a dark grey, we make use of the following code:

h1, h2, h3, h4, h5, h6 {
    color: #555555;
}

Font colour, like font type, is an essential design element. Colours convey emotions to a special extent. Therefore, it is important to stay con­sist­ent and not use too many colours on a page. An in­con­sist­ent or poorly co­ordin­ated colour scheme has an un­set­tling effect and can downright scare away page visitors. When in doubt: Less is more.

For better usability, it is essential to ensure a suf­fi­ciently high contrast ratio. Only then will the texts be legible ef­fort­lessly. For­tu­nately, contrast values can be cal­cu­lated for com­bin­a­tions of text and back­ground colour. The already mentioned Tachyons framework comes with a mature colour table including some high-contrast com­bin­a­tions. If you copy suitable colour values from there for your own WordPress site, you can’t go wrong.

Depending on the editor used, it is possible to change the font colour in WordPress without using CSS. This usually quickly leads to an in­con­sist­ent ap­pear­ance and is therefore not a good idea. The modern Gutenberg editor offers a viable middle ground. Gutenberg has a pre­defined colour palette that can be adapted to the colour scheme of the theme. If you assign one of the pre­defined text colours to a block, the editor only adds a few CSS classes. This way, the sep­ar­a­tion of topics is preserved; if necessary, the classes can be over­writ­ten or muted af­ter­wards.

However, Gutenberg also allows you to assign an ‘in­di­vidu­al colour’ to in­di­vidu­al sections of text out of the box. This should be avoided at all costs. Instead of a pre­defined class name, Gutenberg inserts the in­di­vidu­al colour as a hardcoded colour value per inline style into the HTML code. Shown here as an example:

<span style="color:#38a300" class="has-inline-color">I live in Los Angeles, have a great dog named Jack, and I like piña coladas</span>

Inline styles have the highest CSS spe­cificity and thus stub­bornly survive later redesigns. It is therefore advisable to disable custom colours in the editor. To do this, we enter the following code in the functions.php file of our child theme:

function disable_gutenberg_custom_color_picker() {
    add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_picker' );

Al­tern­at­ively, the Gutenberg colour palette can be com­pletely disabled. Again, we use the functions.php file:

function disable_gutenberg_custom_color_palette() {
    add_theme_support( 'editor-color-palette' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_palette' );
Con­clu­sion

The optimal way to change fonts in WordPress is to change font settings globally via CSS. It is best to use stand­ard­iszed CSS font stacks. If a custom web font is needed, it is strongly advised to minimisze the number of style variants. If the desired font is available as a variable font, this should be preferred. For maximum control, host the fonts yourself and use a web font generator.

If you want to change font size and font colour in WordPress, the Gutenberg editor offers a good com­prom­ise. Provided that the in­di­vidu­al font sizes and colours have been disabled via theme con­fig­ur­a­tion, the pre­defined values can be used fairly easily.

Go to Main Menu