How to add fonts to a WordPress site

Fonts are the various sizes and styles of a typeface and can be used on a website to style the letters of its text. Here we show how to add fonts in WordPress.

Table of contents

Introduction to adding fonts to a WordPress site

In typography, a font is a particular size, weight and style of a typeface. Its characteristics such as size (e.g. 16 px), weight/thickness/boldness (e.g. bold), slope (e.g. italic) and width (e.g. condensed) create different variations of a typeface.

A typeface on the other hand 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.

By using various font-related properties and CSS3 rules, website developers and designers can use almost any typeface on a website. After the desired typeface has been selected, its fonts can be referenced in one of the following ways:

Locally from the browsing device (e.g. cross-platform or web-safe fonts)
Remotely over the internet (e.g. Google Fonts)
Locally from the website webserver (i.e. inside the website’s directory structure).

Choosing a typeface and its fonts

There are various criteria when it comes to choosing the right typeface for a design project. One important factor that web design adds to this list is the availability of its fonts to the website browsers.

Some fonts are available on the end user’s device, while others need to be downloaded or referenced. In the case where no font is specified, the web designers can rely on the default font set out by the browsing device’s web browser.

Free and commercial fonts can be searched for and downloaded from all over the internet. They can also be downloaded from Google Fonts.

Licensed fonts

Not all fonts are free to use. Each font is licenced by its designer. Many premium fonts have licence agreements that include some form of financial compensation for their use.

One of the more common font licences is the MIT Open Font License (OFL). This licence, also used by Google Fonts, allows free use in products & projects — print or digital, commercial or otherwise. The OFL does not allow the selling of fonts as your own.

Before using a font, make sure to familiarise yourself with the licence terms.

Referencing fonts using CSS

Website HTML is styled using Cascading Style Sheets (CSS). Assuming the font is already available (i.e. installed on the browsing device, saved on the website or referenced from the internet), CSS can be used to style and use them.

A WordPress website can be instructed from any location, but developers usually use the main style.css file of the (child) theme.

The shorthand CSS font properties are:

font-family: e.g. "Arial" (default value is browser dependant)
font-size: e.g. "16px" (default value is browser dependant)
font-variant: e.g. "small-caps" (default value is "normal")
font-style: e.g. "underline" (default value is "normal")
font-weight: e.g. "bold" (default value is "normal")

When CSS is used, the font-size and font-family values are required otherwise the default browser value will be used. If one of the other values is missing, their default value is used.

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

p {
 font-family: Arial;
 font-size: 14px;
 /*font-weight: normal;*/
 /*font-style: normal;*/
}

Font properties can also be declared by using the font: property. The CSS font property syntax is as follows:

p {
 font: font-style font-variant font-weight font-size/line-height font-family
}

The above example can thus also be written as:

p {
 font: 14px Arial;
}

Note that font properties can be used starting from CSS3. Web browsers that do not support CSS3 will simply ignore these properties.

font-family

The font-family is synonymous with typeface. If no value for font-family is given, the user’s web browser’s default font-family will be used. Each web browser has its own default font.

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 also 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.

font-size

Also known as line-height: . It specifies the size (or the line-height) of the font. Values can be given as px, em, % or rem. If no value for font-size is given, the user’s web browser default font-size will be used. Each web browser has its own default value.

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 CSS stylesheet to look for referenced fonts.

If no font has been referenced 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. The location can either be local (e.g. on the web server itself) or remotely on another server (e.g. Google Fonts).
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 a 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 fonts that are hosted on the website web server

After declaring fonts in the CSS file, the font files themselves have to be referenced. Font files can either be referenced locally (e.g. from the website webserver), or from a remote location (e.g. Google Fonts — see later).

By hosting font files the necessity of having to make external URL calls is removed. Although the font or fonts still need to be downloaded by the website user, self-hosted fonts load faster than remote-hosted ones.

Fonts are typically downloaded as desktop fonts with .ttf for TrueType and .otf for OpenType as file extension. The most robust way to serve fonts is by converting them into webfonts. A webfont is a specially tuned font for use on websites using the CSS @font-face declaration. Apart from TTF and OFT files, webfonts also include .eot, .svg, .woff and .woff2 formats.

Downloaded fonts can be converted to webfonts by using a webfont converter service. Online webfont converter services include Simple Online Web Font Converter and Font Squirrel.

After they have been converted, the webfont files need to be uploaded to a known directory/folder on the web server.

In WordPress, things can be kept organised by uploading them 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 added to the CSS stylesheet file. 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.

As an example, the Roboto font families downloaded from Google Fonts will be used. The Roboto font 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 first asks for the desktop font file to be converted. All the webfont formats need to be selected after which the files will be downloadable as a single .zip file.

By choosing ‘Include HTML/CSS template’, Simple Online Web Font Converter will also build the CSS rule to be added to the 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 can be copied into the style.css before the src: url field of each font extension is inserted:

/* font converted using font-converter.net. */
@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 */
}

In this case, the URL is pointed to the fonts directory which is situated within the same directory as the stylesheet file.

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

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

Using fonts that are stored remotely

Another way to add fonts is by referencing remotely. There are a couple of services on the internet that offers font collections that can be called from their servers. Google Fonts is a popular choice and contains hundreds of fonts that are stored on CDN servers.

By using fonts that are stored remotely, the advantages are saving space on the web server and the accessibility to new and more exotic-looking fonts. When compared with hosting fonts locally, the implementation on WordPress is slightly more complicated and external URL calls need to be made by the end user’s web browser — costing speed.

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 earlier).

The Google Font API also allows websites to reference their fonts remotely from their servers.

Google Fonts popup screen after selecting the Roboto font family/typeface.

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 the stylesheet link can 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 remotely on a website. After adding this code, each time its respective fonts are declared, 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 web page

The stylesheet HTML code generated by Google Fonts will look something like this:

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

Stylesheets are wrapped in an HTML <link> tag. The stylesheet above will reference the Roboto @font-face rule and the font-family property and point to 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 web page where the font will be used.

Adding a Google Fonts stylesheet to a WordPress website

In the case of WordPress, the stylesheet URL generated by Google Fonts can be added to the <head></head> section of the (child) theme in one of two ways:

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

To add stylesheets the WordPress way, 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 callback function that will be added to the wp_enqueue_scripts() action hook. The callback 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 ($handle) 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 of 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 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 and https://fonts.googleapis.com/css2?family=Roboto&display=swap was used as the URL of the stylesheet.

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. 20) means a high priority and a low number (e.g. 1) means a low priority. The default WordPress priority is 10.

The priority parameter basically determines the order of the function within the wp_enqueue_scripts section. The priority can be left to its default, except if there is another stylesheet being enqueued with the same handle. By setting a higher priority (e.g. 20), the script will be executed after the initial one and basically overwrite it.

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', 20 );

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 web server.