How to customize fonts in WordPress

An important element in branding your site is the font, or fonts, used to render the text on your posts and pages. With a choice of hundreds of thousand of fonts available online, you can invest hours – or longer – finding precisely the right font to suit your content. Remember, however, that users must have that same font installed on their machines, or else they’ll see a reasonably close approximation of your choice using a generic typeface.

Many themes include typography options that allow you to quickly select from a wide selection of web fonts. They often rely on a fabulous selection of fonts available from Google.

Google Fonts

Alternatively, you can configure headline and body fonts for your site in the theme’s stylesheet (Appearance > Editor > Stylesheet). Fonts can be configured for specific tags, or for predefined id and class elements.

In the following example, text tagged with the id #mytext is set to be rendered in the Arial font, falling back to Helvetica or a generic sans-serif font, if not available. Font size is 16px and the color, light-gray (denoted by the hex code #ccc).

#mytext {font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#ccc; }

When you examine a theme’s stylesheet, you may find that fonts are pre-set in the body class. If text isn’t specifically defined with a style or font, it will be rendered using this “fall-back” class. For example:

body {font-family: Open Sans, Arial, Helvetica, sans-serif; 
           font-size: 22px;

To identify the class or id that your text is tagged with, you can search the stylesheet, or alternatively, when viewing a post or page on your site, right click the text and select Inspect.

Inspect tool

This displays the browser’s Developer Console, which can be used to identify CSS elements and rules used to display your text. You can experiment with editing rules directly in the console, before editing those same rules in your stylesheet to lock in the change.

Developer Console

Check out the WordPress Codex to read more about identifying CSS styles.

To mitigate the issues of fonts not being installed on your user’s computers, try using external fonts on your WordPress site. There are a variety of repositories available from which you can select external fonts, which are temporarily downloaded to users’ computers when they visit your website.

Check out Google Web Fonts and Adobe TypeKit to view the selection of available typefaces. These can be added to your site with ease following a little configuration and the copy and pasting of a couple of lines of code into site’s header.php file. Bear in mind, however, that each web font you use on your site must be downloaded during the rendering of your page. A smaller selection of fonts will result in faster page load times.

Find out more about working with fonts at the WordPress Codex. For further questions, or if you need help, please open a support ticket from your HostPapa Dashboard. Follow this link to learn how.

Was this article helpful?