Fonts in WordPress — how to add them

Adding fonts to a WordPress site

The right typeface can significantly contribute to the overall style and feel of a website. Here we discuss the basics of adding fonts to a WordPress website.

This is an ongoing post. Please suggest corrections, explanations, etc. in the comment section at the bottom of this page.

Introduction

A typeface is the overall (creative) design of lettering. It refers to a group of characters, letters and numbers that share the same design. There are thousands of different typefaces in existence but think, for example, Arial, Garamond and Times.

Apart from the typeface, this post will also discuss the difference between a typeface, a font-family and a font, referencing fonts in WordPress, how web browsers choose a font and how website developers can use a font in the following ways:

  • Using local device fonts (including cross-platform or web-safe fonts)
  • Using fonts that are stored remotely (e.g. Google Fonts)
  • Using fonts that are stored on the website webserver.

Typefaces, font families and fonts

The word typeface is synonymous with font-family. It refers to the design of the letters and numbers. A font, on the other hand, has characteristics such as size (e.g. 12 px), weight/thickness/boldness (e.g. bold), slope (e.g. italic) and width (e.g. condensed). In other words, a typeface variation is called a font.

On an electronic device, fonts are distributed as font files with .ttf as the file extension. Note that additional extensions exist for ‘web fonts’ (see later). In this case, for a device to be able to display the Arial Bold style, the Arial Bold font file needs to be present on the device.

Each device is running an operating system (e.g. Windows, Android, iOS, etc.). The operating system will have some sort of way to store and manage its font collection:

  • Microsoft Windows uses the \windows\fonts directory
  • Linux uses the /usr/share/fonts directory
  • iOS uses the /System/Library/Fonts/ directory

Windows users can use the File Explorer and browse to their Fonts directory (\windows\fonts). When, for example, opening the Arial typeface, you will be taken to a collection of Arial fonts. These will include thin, regular, bold, italics, etc. each represented as their own font file. Sizes don’t have their own files.

Arial Regular font
The Arial Regular font (file).

Referencing fonts in WordPress

HTML code is styled using Cascading Style Sheets (or CSS). WordPress can be instructed from any location, but developers usually use the main style file (e.g. style.css) of the (child) theme.

It was discussed in the previous heading how a font is a variation within a typeface. In WordPress, fonts are referenced inside a style sheet using various properties. These properties include:

  • font-family
  • font-weight
  • font-size
  • font-style

As an example, to use the regular thickness, normal-styled Arial font with the size of 12px in a paragraph, the following CSS will be used:

p {
 font-family: Arial;
 font-weight: normal;
 font-size: 12px;
 font-style: normal;
}

The CSS font-family property can hold one or several fonts. When the font name contains whitespace (e.g. Arial Black), it must be quoted with single quotes. It is considered good practice to use the ‘fallback’ system where additional fonts are added. If the web browser does not support the first font, it tries the next font, and so on. Multiple fonts are separated by a comma:

p {
 font-family: Arial, Helvetica, sans-serif;
}

It is common practice to use the Windows font followed by the Mac equivalent. A generic font can also be set as the last option. In the CSS example code above, Arial is the name of the Windows font, Helvetica is the name of the Mac font and sans-serif is the generic font family.

By using the CSS font-family property, different fonts can be set for different elements, for example:

p {
 font-family: Arial, Helvetica, sans-serif;
}

.block-element p {
 font-family: 'Arial Black', Gadget, sans-serif;
}

In this case, the paragraph tags are set to use one set of font names and the .block-element CSS class is set to use a different set of font names.

Choosing a font as a web browser

Web pages are viewed by using a web browser (e.g. Chrome, Internet Explorer, Edge, Firefox, etc.). While loading a web page, the web browser will use its stylesheet(s) to look for referenced fonts.

If no font has been referenced then the browser will resort to showing its own default font. This is operating system dependant, but with most web browsers the default font will either be Times New Roman or Times.

If a font has been referenced by the web page, then one of the following events will happen:

  • Modern web browsers (i.e. those supporting CSS3) will attempt to find the location of the font and use that location to read and display the font.
  • If there is no font location set, the font could not be fetched from the location or the browser doesn’t support CSS3, then it will attempt to find the font locally on the user’s device.
  • If the font is found on the device, it will be displayed.
  • If the font is not found locally then the browser will look for the first fallback font.
  • If there are no more fallback fonts to look for, then the browser will show its default font.

Various rules exist for establishing the thickness of font too. The web browser will attempt to find the ‘best fit’ in, for example, the case where the font should be bold, but a bold font file was not found.

Using a device font

This section will focus on using fonts that are available on the user’s device. The two sections after this one will give more information on using fonts that are hosted remotely and using fonts that are hosted on the WordPress website webserver.

When no online font source is given, the web browser is dependant on the font collection of the operating system they run from. Therefore, a WordPress website developer can consider using a font that might already be available on the end user’s device.

Device fonts come from its operating system’s default font collection in combination with additional fonts that were downloaded and/or installed over time.

Installing a fonttype on Windows
On Microsoft Windows, additional fonts can be installed by opening the font file and clicking the Install button (red circle).

Many software packages, e.g. Microsoft Office, LibreOffice, Open Office etc., will install additional fonts to a device. In addition to this, free and commercial fonts can be searched for and downloaded from all over the internet. They can also be downloaded from Google Fonts (see later).

Cross-platform fonts

Now, at least Microsoft and Apple have agreed, to some extent, to have some of their shipped fonts in common. These are called cross-platform fonts (also referred to as web-safe fonts). Cross-platform fonts are very likely available on most devices (irrespective of their operating system).

Some of the known cross-platform fonts are listed below. There might also be some others, so let me know in the comment section below if you know of any.

Windows Font name, Mac Font name(s), Generic Font Family (font-family property):

Arial, Helvetica, sans-serif
(font-family: Arial, Helvetica, sans-serif;)
Arial Black, Gadget, sans-serif
(font-family: ‘Arial Black’, Gadget, sans-serif;)
Bookman Old Style (Bookman), Bookman Old Style, serif
(font-family: ‘Bookman Old Style’, serif;)
Century, Century Schoolbook, serif
(font-family: Century, ‘Century Schoolbook’, serif;)
Century Gothic, Century Gothic, sans-serif
(font-family: ‘Century Gothic’, sans-serif;)
Comic Sans MS, Textile, cursive
(font-family: ‘Comic Sans MS’, Textile, cursive;)
Courier New, Courier, monospace
(font-family: ‘Courier New’, Courier, monospace;)
Garamond, Garamond, serif
(font-family: Garamond, serif;)
Georgia, Georgia, serif
(font-family: Georgia, serif;)
Impact, Charcoal, sans-serif
(font-family: Impact, Charcoal, sans-serif;)
Lucida Console, Monaco, monospace
(font-family: ‘Lucida Console’, Monaco, monospace;)
Lucida Sans Unicode, Lucida Grande, sans-serif
(font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;)
Palatino Linotype, Book Antiqua, Palatino, serif
(font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;)
Tahoma, Geneve, sans-serif
(font-family: Tahoma, Geneva, sans-serif;)
Times New Roman, Times, serif
(font-family: ‘Times New Roman’, Times, serif;)
Trebuchet MS, Trebuchet MS, sans-serif
(font-family: ‘Trebuchet MS’, sans-serif;)
MS Sans Serif, Geneva, sans-serif
(font-family: ‘MS Sans Serif’, Geneva, sans-serif;)
MS Serif, New York, serif
(font-family: ‘MS Serif’, ‘New York’, serif;)
Verdana, Verdana, serif
(font-family: Verdana, serif;)

Using fonts that are stored remotely

The previous section discussed fonts that are available locally on the end user’s device. This section will discuss using fonts that are called from a remote location. There are a couple of services out there that offers font collections that can be called from their servers. A popular choice is Google Fonts.

By using a font that is stored remotely, the advantages are saving space on the webserver and the accessibility to new and more exotic-looking fonts. (For some) complicated code is required to enqueue its stylesheet and an external URL call needs to be made by the end user’s web browser – costing speed.

Note that CSS3 rules will be used, which will not work on older web browsers. Fortunately, browsers that do not support CSS3 will simply ignore its rules.

Google Fonts

Google Fonts is an interactive directory with more than 800 typefaces. It allows some fonts to be purchased while others come with a free license. Free font styles can be selected and downloaded and font files can be installed on a device and/or uploaded to a web server (see later). The Google Font API also allows websites to reference their fonts remotely from their servers.

Google Fonts
Google Fonts – after selecting the Robot font.

To start off with Google Fonts, their typefaces can be browsed or the search bar (at the top left of the page) can be used to look for a specific typeface.

After selecting the desired typeface, options to add font thickness and styles will be visible. When all the desired variants were selected, they can either be downloaded by clicking on the Download family link and/or be embedded by clicking the View your selected families button on the top right corner of the screen.

By using the embedded code, the selected fonts can be used on a WordPress website. After adding this code, each time its respective fonts are referenced, the font files will be collected from Google Fonts.

As an example, the Roboto Regular 400 style was selected by clicking on its respective Select this style links. After clicking on the View your selected families, Google Fonts generated the stylesheet HTML code and the CSS font-family property.

Adding a Google Fonts stylesheet to a WordPress website

The stylesheet HTML code generated by Google Fonts looks as follows:

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

As you can see, it is wrapped in an HTML <link> tag. This stylesheet will reference the Roboto @font-face rule and its location on one of the Google Fonts servers. An exact copy of the stylesheet HTML <link> tag needs to be placed in the header section (inside the <head></head> tags) of the (child) theme. This can be done in a couple of ways, but the two most recommended ways are as follows:

  1. Manually copying and pasting the entire stylesheet HTML code to the (child) theme’s head.php file
  2. Enqueueing the stylesheet using the WordPress wp_enqueue_styles() function and the wp_enqueue_scripts action hook (requires WordPress PHP code)

When using remote font requests (i.e. stylesheets containing remote font locations), the goal is to do the requests as early as possible. This means that the stylesheet HTML <link> tag needs to be placed as early possible (as high up as possible) in the header section. When enqueueing is used, then a high priority parameter can be used (see next).

To enqueue a stylesheet in WordPress, the wp_enqueue_style() function needs to be used within a plugin or the (child) theme’s functions.php file. Using this function will not only make sure that the stylesheet is placed correctly into the header section, but also ensure that there are no clashes between the stylesheet and all the other enqueued stylesheets.

The final PHP code will look as follows:

/**
* Enqueueing the Roboto font stylesheet from Google Fonts
*/
function bts_enqueue_googlefont_stylesheet() {
 wp_enqueue_style( 'bts-roboto-families', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap' );
}
add_action( 'wp_enqueue_scripts', 'bts_enqueue_googlefont_stylesheet', 2 );

To start enqueueing the stylesheet, first, create a function what will be added to the wp_enqueue_scripts() action hook. The function can have any name, as long as it’s descriptive and unique:

/**
* Enqueueing the Roboto font stylesheet from Google Fonts
*/
function bts_enqueue_googlefont_stylesheet() {
 // function code comes here...
}

In this case, bts-enqueue-googlefont-stylesheet was used.

Now the wp_enqueue_style() function needs to be added inside this function. The wp_enqueue_style() function takes a couple of arguments/parameters, but by looking at the WordPress Code Reference, we will only need to supply the name of the stylesheet ($hande) and the URL of the stylesheet ($src):

/**
* Enqueueing the Roboto font stylesheet from Google Fonts
*/
function bts_enqueue_googlefont_stylesheet() {
 wp_enqueue_style( $handle, $src );
}

The URL to the stylesheet is the link in the href attribute and the handle can be any made-up stylesheet name, as long as it’s descriptive and unique. Both the parameters are passed in as strings, so make sure to use apostrophes:

/**
* Enqueueing the Roboto font stylesheet from Google Fonts
*/
function bts_enqueue_googlefont_stylesheet() {
 wp_enqueue_style( 'bts-roboto-families', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap' );
}

In this case, bts-roboto-families was used as the $handle.

The final step in enqueueing the stylesheet is by using the wp_enqueue_scripts() action hook to add bts_enqueue_googlefont_stylesheet to the rest of the enqueue scripts:

/**
* Enqueueing the Roboto font stylesheet from Google Fonts
*/
function bts_enqueue_googlefont_stylesheet() {
 wp_enqueue_style( 'bts-roboto-families', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap' );
}
add_action( 'wp_enqueue_scripts', 'bts_enqueue_googlefont_stylesheet' );

The wp_enqueue_scripts() action hook can also take a priority parameter. It is inserted as an integer where a high number (e.g. 100) means a low priority and a low number (e.g. 1) means a high priority. The default priority is 10. To set a high priority, the function can be written as follows:

/**
* Enqueueing the Roboto font stylesheet from Google Fonts
*/
function bts_enqueue_googlefont_stylesheet() {
 wp_enqueue_style( 'bts-roboto-families', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap' );
}
add_action( 'wp_enqueue_scripts', 'bts_enqueue_googlefont_stylesheet', 2 );

Adding a Google Fonts font family to a WordPress website

After the stylesheet has been added to the WordPress website, the Roboto font family can be added as to the font-family property inside the (child) theme’s style.css file:

p {
 font-family: 'Roboto', sans-serif;
}

Using fonts that are hosted on the WordPress website webserver

Now that we went through using fonts that are available on the user’s device and using fonts that are hosted remotely, this section is going to end off by showing how to use fonts that are hosted on the WordPress website webserver.

When the font that is going to be used is not a default font on the end user’s device, but you are still speed-conscious, the font can always be stored on the WordPress website webserver. Although the font still needs to be downloaded, by using this method, there are no external URL calls to a remote server.

Note that CSS3 rules will be used, which will not work on older web browsers. Fortunately, browsers that do not support CSS3 will simply ignore its rules.

To start the process, the font file (or files) that is going to be used need to be available as webfont files (EOT, .OTF, .SVG, .TTF, .WOFF and .WOFF2 formats). As mentioned before, font files can be downloaded from various sources, including Google Fonts. One font file can be converted to webfont files by using a webfont converter service. Online webfont converter services include Simple Online Web Font Converter and Font Squirrel.

The webfont files then need to be uploaded to a known directory on the webserver. To keep things organised, the font files can be uploaded to the (child) theme’s /fonts directory. (e.g. /wp-content/themes/child-theme/fonts).

After the font files have been uploaded, the location of these font files needs to be communicated to the web browser browsing the (child) theme’s stylesheet. This is done using the @font-face rule that will include the font-family and src: url properties (see below). Some services like Simple Online Web Font Converter can automatically generate these CSS values during the font conversion process.

Lastly, the (child) theme style.css file also needs to be updated with the font-family property.

As an example, the Roboto font families downloaded from Google Fonts will be used. The Roboto font styles/files will be collectively downloaded as Roboto.zip. For simplicity’s sake, only Roboto Regular (Roboto-Regular.ttf) was used.

To convert the font into .EOT, .OTF, .SVG, .TTF, .WOFF and .WOFF2 formats,  Simple Online Web Font Converter can be used:

Simple Online Web Font Converter
Use Simple Online Web Font Converter and follow the instructions.

By choosing ‘Include HTML/CSS template’, Simple Online Web Font Converter will also build the CSS rule to be added to the (child) theme’s style.css file.

After pressing the Convert your font button, Simple Online Web Font Converter will respond with a downloadable zip file containing a directory with the converted fonts, an index.html file to test the conversion and a style.css file.

The content of the style.css file is copied into the (child) theme’s style.css before the src: url field of each font extension is inserted:

/* font converted using font-converter.net. thank you! */
@font-face {
 font-family: "Roboto-Regular";
 src: url("./fonts/Roboto-Regular.eot"); /* IE9 Compat Modes */
 src: url("./fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("./fonts/Roboto-Regular.otf") format("opentype"), /* Open Type Font */
  url("./fonts/Roboto-Regular.svg") format("svg"), /* Legacy iOS */
  url("./fonts/Roboto-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
  url("./fonts/Roboto-Regular.woff") format("woff"), /* Modern Browsers */
  url("./fonts/Roboto-Regular.woff2") format("woff2"); /* Modern Browsers */
 font-weight: normal;
 font-style: normal;
}

The URL either needs to be defined from the root of the WordPress install, e.g. ./wp-content/themes/child-theme/fonts/) or relative to where the (child) theme’s style.css file is located, e.g. ./fonts/.

Lastly, the font-family property needs to be set as described previously. Note that the font name needs to be the same as defined in the @font-face rule:

p {
 font-family: 'Roboto-Regular', sans-serif;
}

Conclusion

With some background, understanding and a bit of know-how, fonts can easily be added to a WordPress site. Font can either be called from the end user’s device, a remote location or from the WordPress website webserver.

About the author
Renier busies himself with improving his English writing, creative web design and his websites, photoshopping, micro-electronics, multiple genres of music, superhero movies and badass series.
Behind the Scenes is a free, informative website. If you find value in any of our content, please consider making a donation to our cause.
Donate via PayPal

Save, share & Disqus

Use the buttons below, on the left or the bottom of this page to share this post. Your comment is important, but don't be a knob. Keep it constructive and polite.

Comment via Disqus

Disqus is a worldwide comment hosting service for web sites and online communities. This secure platform ensures a pleasant commenting environment which is manageable from one account. Use the Login button to sign up.

More website development related posts

Discover the easy way to send bulk SMS from your PC, Mac or mobile device
Discover the easy way to send bulk SMS from your PC, Mac or mobile device
24 October 2020
Ad: Using the latest in technology, WinSMS offers cost effective messaging solutions that makers and business owners can use. With their online portal and API functionality, buying SMS bundles and sending them to recipients is more cost effective and easy to do. More…
Getting started with private projects on Raspbian and Bitbucket
Getting started with private projects on Raspbian and Bitbucket
28 October 2018 | Updated 10 March 2020
Bitbucket is a great alternative to Github to start, store and track simple programming dependant project files. On a Raspberry Pi, it can be done using Raspbian. Projects uploaded to Bitbucket with less than 6 contributors can be kept private and won’t cost a cent. More…
Using Cron to schedule tasks
Using Cron for scheduling tasks
30 June 2017 | Updated 11 July 2017
Cron is an Unix-like operating system software utility used to schedule automatic time-based commands. Entered commands can be in the form of Bash or Bash scripts that are meant to be automatically executed periodically at fixed times, dates or intervals. More…