Web design and customization

Making the most of the Font Library

Transcript

Introduction

In this lesson, you will discover the Font Library and learn how you can make the most of it. The learning objectives are accessing and using the Font Library and considering font family pairing and legibility. A great new feature that landed with WordPress 6.5 is the ability to access and use the Font Library. This tool simplifies font management across your site, allowing you to install, use, and remove custom fonts. Think of it as a Media Library for fonts. Just as you can add and upload photos to the Media Library, you can now do the same with fonts. Any installed font, whether by you or the theme distributor, can be selected when editing.

Font Library

To get started, click on the Global Styles icon at the top right in the Site Editor, select Typography, and then click on Manage Fonts. Below Library, you will see your installed fonts as well as the ones defined in the theme. If you want to upload a licensed web font from your computer, click on Upload and then select the file. If you can’t install fonts, it might be due to restrictions from your hosting provider. Contact your host and ask to enable font installation, or consider switching to a more flexible hosting plan. To install fonts from Google Fonts, click on the Install Fonts tab. For the first time, you would need to allow WordPress to connect to Google servers. You can revoke access at any time. When you click on the three vertical dots, you can merely click on Revoke Access to Google Fonts.

Locally hosted

The fonts you install will be downloaded from Google and stored on your site. That means it’s locally hosted. Locally hosted fonts make your site faster and protect your visitors’ privacy. Let me explain a bit further. If your fonts are locally hosted, a visitor to your site doesn’t need to connect to Google’s servers to access the files. You, therefore, minimize load times and avoid sending user data to Google. This ensures compliance with data protection regulations. If you know the name of the font you want to use, search for it directly. In this case, Merriweather. You can also filter the category to display specific typefaces. When you select a font, you will notice a single variant or multiple variants. So the Font Library, therefore, provides granular control over different weights and styles, encouraging you to be mindful of which font variations you install and enable.

Pairing font families

Next, let’s discuss pairing font families. Font families are groups of related typefaces that share common design characteristics. For example, Serif fonts like Georgia Pro or Times New Roman have small lines or decorations at the ends of the letters, giving them a classic formal look. On the other hand, Sans Serif fonts such as Ariel or Helvetica lack these decorations, providing a clean, modern aesthetic. While it might be tempting to use a variety of fonts to make your design stand out, mixing too many fonts creates a cluttered, inconsistent look and slows down loading times. It’s best to stick to two flexible, high-quality font families to maintain a harmonious, professional design and ensure fast load times. A common practice is to use one font for headings and another for body text and apply different styles to special elements like quotes or call-outs. This approach keeps your design cohesive.

Font pairing example

Let’s look at an example. I decided to use a Serif and a Sans Serif that complement each other. For headings, I selected Merriweather and Ubuntu Sans for the body text. Merriweather grabs attention with its classic and sophisticated style, and Ubuntu Sans keeps the body text bold yet easy to read. Setting the pull quote to a light, italic, weight, and style highlights the special text with a distinctive touch without loading a third family. This pairing creates a unified and effective design that balances impact with readability. Lastly, let’s talk about legibility. You also need to ensure that the fonts you choose to present your texts are legible. This visual aspect of readability means that the textual content across your site is clear. The letters are distinct and well-designed. The font size is big enough, and the colors have sufficient contrast with your background colors.

Conclusion

Avoid overly decorative fonts, usually cursive typefaces, that can be difficult to read, whether for yourself, visually impaired people, or visitors whose native language is different. To conclude, easy-to-read font should always be a top priority in your design decisions.

Practical

Use WordPress Playground to test your knowledge:

  • Access the Font Library
    • Step 1: Log in to your WordPress site.
    • Step 2: Navigate to the Site Editor by going to Appearance > Editor.
    • Step 3: Click the Global Styles icon (top-right corner).
    • Step 4: Select Typography and then click on Manage Fonts.
  • Install New Fonts
    • Step 1: Click on the Install Fonts tab within the Font Library.
    • Step 2: Search for a font you want to install (e.g., Merriweather).
    • Step 3: Install the font by allowing WordPress to connect to Google Fonts.
    • Step 4: If you have a custom font file, upload it by selecting the Upload button and choosing a licensed font from your computer.
    • Step 5: Once the font is installed, verify it’s listed in your Installed Fonts section.
  • Create Font Pairing
    • Step 1: Choose two fonts to use on your website. One for headings (e.g., Merriweather for a classic look) and one for body text (e.g., Ubuntu Sans for a modern, clean style).
    • Step 2: Apply the fonts to your site.
      • Headings: Navigate to the Typography settings in the Site Editor and select your chosen font for headings.
      • Body Text: Set your body font using the same settings, as well as Links, Captions, and Buttons.
    • Step 3: Experiment with different weights and styles for each font family. Use light or italics for special elements like quotes or call-outs.
This is a preview lesson

Register or sign in to take this lesson.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.