Your website’s font style can make the difference between an aesthetically dreary site or an exciting, interesting one that encourages readers to return time and again.

So, how do you change font in WordPress?

Well, the WordPress design experts at White Peak Digital have developed the following simple guide to help you do just that.

Understanding Fonts in WordPress

With thousands of fonts available, choosing the right one can be overwhelming.

In WordPress, fonts can be categorised into four main types: serif, sans-serif, script and display.

Serif fonts, such as Times New Roman, are ideal for body text due to their traditional and formal appearance. They are often used in print media and can give your website a classic look.

On the other hand, sans-serif fonts, like Arial, are better suited for headings and modern designs. They are clean, straightforward and easy to read on screens. They are commonly used for digital content.

Script fonts like Lobster add a touch of elegance and personality to your site. They mimic handwritten text and are perfect for adding a creative flair to titles or special sections.

Display fonts such as Impact are bold and eye catching, making them ideal for titles and headlines that need to stand out.

By understanding these categories, you can make more informed decisions about which fonts to use on your WordPress site to enhance its overall aesthetic and readability.

Loading Custom Fonts Onto WordPress

Loading your own scheme of custom web fonts onto WordPress can enable you to give your site a unique aesthetic that makes it stand out from the crowd and enhances readability.

You can also upload custom fonts for enhanced design flexibility.

As a result, this can help increase optimise organic traffic, extend the amount of time users spend on your site and increase the likelihood of their return.

That said, it’s also worth noting that WordPress themes do come with their own appealing font styles.

Website Copy

However, if you’re keen to add your own web fonts, then there are countless websites that provide font files for precisely that purpose. These include Google Fonts, Fonts.com and many more.

However, no matter what your source, you can add your desired fonts to WordPress via one of 3 methods:

  1. Manually enqueue Fonts onto WordPress
  2. Change the font family via means of the theme stylesheet
  3. Use a plugin

Admittedly these 3 options can seem a little daunting to anyone with no more than an average experience of website building. However, even newcomers to WordPress can upload the fonts that they desire.

How To Load Google Fonts Onto WordPress

If you don’t want to add another plugin to your WordPress website, you can manually upload new fonts via means of code by enqueueing them.

Users can access the entire Google font library for a wide range of font options.

You can load Google fonts onto WordPress by following these steps:

1. Identify Your Font

First, identify the font or font family that you want to transfer over to your WordPress website.

Selecting a suitable heading font is crucial for better readability and design, as it helps in distinguishing different sections of your content effectively.

Once identified, add it to your Google Font(s) library by clicking the corresponding “+” button.

2. Copy the Code

When working with fonts in WordPress, it’s essential to understand how to copy and paste code effectively.

The @font-face rule allows you to add custom fonts to your WordPress theme, giving you complete control over your site’s typography.

To use this rule, you’ll need to upload your font files to your server and define your font family in the style.css file.

Here’s an example of how to do this:

@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'), url('my-custom-font.woff') format('woff'), url('my-custom-font.ttf') format('truetype');
}

This code tells WordPress to use the custom font file my-custom-font.woff2 for the font family My Custom Font.

By defining the font family and specifying the font file formats, you ensure that your custom font is correctly loaded and displayed on your website.

3. Copy the Code

After that, click the “View Your Selected Families” icon at the top right of the screen. Here you’ll see the font’s bespoke CSS script – the information required to add it to your site.

In particular, a specific section of the “Link” code is required for WordPress, and as we’re going to enqueue the font(s), that section can be taken from the 3rd line of the code.

An example link code might look as follows (for ease, I’ve highlighted the section that needs replacing).

< link rel="preconnect" href="https://fonts.googleapis.com">
< link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

4. Enqueue Your Font(s)

Once copied, open WordPress and open your theme’s function file. With your new font’s code inserted, it should look something like this (again, I’ve highlighted the code that needs replacing):

function add_google_fonts() {
wp_register_style('googleFonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap');
wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts', 'add_google_fonts');

Enqueuing Complete

Process complete, your new font(s) style has been successfully enqueued from Google. To add another font file, simply add another line of code or add your new font(s) code to the same line.

In order to use your new web font, you will need to add them to your stylesheet.

Change Font Family Using Theme Stylesheet

Head to your theme and open its style.css file.

There, you can simply paste the font’s code to style the specific elements of your site.

However, make sure you paste the new CSS file code in after any pre-existing CSS code.

Finally, save your stylesheet and check to see if the changes have been implemented.

Changing Fonts Globally

Changing fonts globally in WordPress means applying a new font to your entire website, ensuring a consistent look and feel across all pages.

This can be done using the WordPress Customizer or by adding custom CSS code to your theme’s style.css file.

To change fonts globally using the Customiser, follow these steps:

  1. Log in to your WordPress dashboard and navigate to Appearance > Customize.
  2. Click on the Typography section.
  3. Select the font family you want to use from the dropdown menu.
  4. Click on the Publish button to save your changes.

Alternatively, you can add custom CSS code to your theme’s style.css file to change fonts globally. For example: body { font-family: ‘My Custom Font’, sans-serif; }

This code applies the custom font My Custom Font to the entire website, ensuring that all text elements use the same font family.

Using A Plugin

Using a fonts plugin is by far the simplest method of adding CSS fonts to your WordPress site. For those of us who aren’t confident with code, this method is highly recommended.

Once you’ve chosen your preferred font(s), simply install the Google Fonts Typography plugin and turn it on.

WordPress CMS Website Backend

After that, from your WordPress dashboard, head to Appearance > Customise > and click on the link for Google Fonts

In the “Basic Settings“, you’ll be presented with three drop boxes under the headings: Base Typography Headings Typography and Buttons and Inputs Typography

You can select your chosen font from there.

Font Styles and Sizes

Font styles and sizes play a crucial role in the readability and design of your WordPress website.

Font styles include font weight, font style and text decoration. While font sizes determine the visual hierarchy of your content.

To change font styles and sizes in WordPress, you can use the WordPress Customizer or add custom CSS code to your theme’s style.css file.

For example, to change the font size of headings, you can add the following code to your style.css file: h1, h2, h3, h4, h5, h6 { font-size: 24px; }

This code sets the font size of all headings to 24 pixels. You can also adjust the font weight and style by adding properties like font-weight: bold; or font-style: italic; to your CSS code.

Optimising Fonts

Optimising fonts is essential for improving the performance and readability of your WordPress website.

Here are some tips for optimising fonts:

  1. Use a limited number of font families: Reducing the number of font families can help decrease page load time.
  2. Choose fonts optimised for web use: Web-optimised fonts are designed to load quickly and look good on all devices.
  3. Use legible font sizes: Ensure that your font sizes are readable on all devices, from desktops to mobile phones.
  4. Avoid using too many font styles and sizes: Keeping your font styles and sizes consistent helps maintain a clean and professional look.
  5. Use a font manager plugin: A font manager plugin can help you manage your fonts efficiently and reduce page load time.

By following these tips, you can optimise your fonts and improve the performance and readability of your WordPress website.

Wrapping Up

Ultimately, the best way to add a custom font to your WordPress theme depends on your experience with the software.

WordPress experts and coders will feel comfortable tweaking codes while amateurs will (and probably should) settle for the plugin.

The latter is the easiest option and reduces the risk of causing damage to the rest of your site.

FAQs

1. Can I Change The Font In WordPress Without Plugins?

Absolutely. You can add custom fonts via means of enqueueing or by copying them into your theme’s stylesheet.

2. What Default Font Comes With WordPress?

WordPress has numerous default/free fonts to choose from and which fonts you can automatically use are often dictated by the website theme you employ.

That being said, the top five most common fonts are:

  • Script Fonts (cursive, calligraphic)
  • Display Fonts (characterful, creative)
  • Modern Fonts (simple, serious, straight)
  • Serif (traditional)
  • Sans Serif (clean, modern)

3. Can I Use A Google Font In WordPress?

Yes. You can use a Google Font via various means in WordPress, the simplest of which is to install Google’s dedicated font plugin.

4. Can I Change The Font Size In WordPress?

You can. Happily, changing font size in WordPress is more straightforward than adding different fonts to your site.

While editing your page/article, simply highlight the section you wish to alter and select the font size within the font options box located in the WordPress customiser window to the right of the page.

To your success,
Jackson