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

It is better to define fonts for the entire site in the theme. This way, a con­sis­tent 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.

$1 Domain Names – Grab your favorite one
  • Simple reg­is­tra­tion
  • Premium TLDs at great prices
  • 24/7 personal con­sul­tant included
  • Free privacy pro­tec­tion for eligible domains

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 spec­i­fi­ca­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 spec­i­fi­ca­tion Ex­pla­na­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­tomiz­er to include ad­di­tion­al CSS; il­lus­trat­ed 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­tomiz­er.
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­for­mance 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­ve­nient, 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­ing­ly.

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­ized 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­ter­na­tive­ly, 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­plic­it­ly allowed by license. / Source: https://www.fontsquir­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­te­grat­ed into the theme. / Source: https://www.fontsquir­rel.com/tools/webfont-generator

Use Any Font

Image: Active “Use Any Font” plugin
After in­stal­la­tion and ac­ti­va­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­de­fined 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­re­spond­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­e­mat­i­cal­ly 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­for­mance 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­vid­ual 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­vid­ual 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­a­tions 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
  • Fully cus­tomiz­able with themes and plugins
  • Hassle-free updating and less admin

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

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

Embed webfont Advantage Dis­ad­van­tage
Using a CSS @import statement Simple, supported by Google Fonts; requires access to stylesheet only. Bad for site per­for­mance; 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­for­mance if external stylesheet is retrieved from cache. Requires access to theme or WordPress headers; may be bad for site per­for­mance 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­stal­la­tion of another plugin; less control compared to manual method and webfont generator.
Including CSS via wp_enqueue_style(). Better site per­for­mance as stylesheets are minimized and con­cate­nat­ed. 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­te­grat­ed into theme and cus­tomized if necessary; requires special knowledge.

How to customize 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 color 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 spec­i­fi­ca­tions in WordPress

Overview of the most important CSS spec­i­fi­ca­tions to change font size and font color in WordPress:

CSS spec­i­fi­ca­tion Ex­pla­na­tion Example
font-size Set font size p { font-size: 1rem; }
font-weight Set font-weight strong { font-weight: bold; }
color Set font color 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­vid­ual font sizes are ar­bi­trar­i­ly chosen. The latter leads to an in­con­sis­tent and choppy looking design. Un­for­tu­nate­ly, both “anti-patterns” can be found in many — even com­mer­cial — WordPress themes. It is better to use relative units for the spec­i­fi­ca­tion of font sizes. With the unit “rem” the size spec­i­fi­ca­tions refer to the HTML root element. Ac­cord­ing­ly, a spec­i­fi­ca­tion of “2rem” means: “twice the normal font size”.

The com­bi­na­tion of per­cent­age for the HTML root element and rem for all other text elements is perfect for re­spon­sive 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 au­to­mat­i­cal­ly 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­vid­ual 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­e­mat­i­cal formulas such as the golden ratio. Font sizes staggered according to a ty­po­graph­ic scale exhibit a har­mo­nious ap­pear­ance. Con­ve­nient­ly, gen­er­a­tors that au­to­mat­i­cal­ly 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­nious im­pres­sion. / Source: https://tachyons.io/#style

How to change the font color in WordPress?

Maybe you already guessed it: To change the font color in WordPress we don’t simply select all the text on a page and then pick a new color from a menu. Instead, we proceed anal­o­gous­ly to the font and set the color 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 color spec­i­fi­ca­tions in CSS. The following CSS rules are equiv­a­lent:

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

As you can see, to set the font color 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 color value for specific classes of elements. For example, to display headings in a dark gray, we make use of the following code:

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

Font color, like font type, is an essential design element. Colors convey emotions to a special extent. Therefore, it is important to stay con­sis­tent and not use too many colors on a page. An in­con­sis­tent or poorly co­or­di­nat­ed color 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­cient­ly high contrast ratio. Only then will the texts be legible ef­fort­less­ly. For­tu­nate­ly, contrast values can be cal­cu­lat­ed for com­bi­na­tions of text and back­ground color. The already mentioned Tachyons framework comes with a mature color table including some high-contrast com­bi­na­tions. If you copy suitable color 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 color in WordPress without using CSS. This usually quickly leads to an in­con­sis­tent ap­pear­ance and is therefore not a good idea. The modern Gutenberg editor offers a viable middle ground. Gutenberg has a pre­de­fined color palette that can be adapted to the color scheme of the theme. If you assign one of the pre­de­fined text colors to a block, the editor only adds a few CSS classes. This way, the sep­a­ra­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­vid­ual color” to in­di­vid­ual sections of text out of the box. This should be avoided at all costs. Instead of a pre­de­fined class name, Gutenberg inserts the in­di­vid­ual color as a hardcoded color 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 speci­fici­ty and thus stub­born­ly survive later redesigns. It is therefore advisable to disable custom colors 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­ter­na­tive­ly, the Gutenberg colour palette can be com­plete­ly 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 stan­dard­ized CSS font stacks. If a custom web font is needed, it is strongly advised to minimize 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 color in WordPress, the Gutenberg editor offers a good com­pro­mise. Provided that the in­di­vid­ual font sizes and colors have been disabled via theme con­fig­u­ra­tion, the pre­de­fined values can be used fairly easily.

Go to Main Menu