A better way to add fonts to a WordPress site

A better way to add fonts to a WordPress site
Published: by
Last updated:

The right font (typeface) for a website can significantly contribute to the overall style of a website. This post will show a better way to add fonts to a WordPress website.

Factors affecting what font to use

There are a few factors that need to be considered when choosing a font for your WordPress website:

  • Availability of the font
  • Style of the font and its variations (e.g. bold, italics, etc.)
  • Price / license (if it is not a free font)
  • Legibility
  • Available sizes
  • Source

Source

In WordPress, fonts are referenced from the (child) theme’s style.css file. The font that is used (in the form of font files) can either be called from another website (e.g. Google Fonts), stored locally on the website/web server itself, or can be drawn from the device’s font collection.

Using a font from a device

Each device with an operating system comes with its own set of default fonts. Document processors, e.g. Microsoft Office, LibreOffice, Open Office etc., might come with a collection of additional fonts. Additional fonts can also be downloaded from the internet and ‘installed’ into a device.

Default and additionally installed fonts are stored on a device’s fonts directory. This is operating system dependent. With Microsoft Windows, font files are usually stored in the /windows/fonts/ directory. If a font is referenced, e.g. from a website through a web browser, and the font file is available on the device, it will be used. If the font file is not available, the web browser will choose a different, but similar type of font.Some fonts are known to be cross-platform fonts (also see later). This means that these fonts are very likely available on most devices (irrespective of their operating system). Cross-platform fonts are popularly used because chances are that they will be available on a device meaning they will show correctly.

Using a font from the internet

Free and paid fonts can be downloaded from all over the internet. Simply do a Google search to get started. Always make sure to read the licencing agreement first.

Installing a fonttype on Windows
Additional fonts can be installed by opening the font file and clicking the Install button.

Once again, if a font is not a cross-platform font, it will very likely not be available on the visiting device, meaning the font will not show correctly. To ensure that a typeface (font) will show correctly, it needs to be either called from the internet (e.g. Google Fonts) or stored on the website itself (see later).

Using a font from Google Fonts

Google Fonts has more than 800 fonts available from their website. They can either be purchased or come with a free license. Fonts can be selected, downloaded and installed on a device, or can be called for from the Google servers (see later).

Using cross-platform fonts

As mentioned earlier, each device with an operating system ships with a bunch of default fonts. At least Microsoft and Apple have agreed, to some extent, to have some of their shipped fonts in common. These are the cross-platform fonts.

Chances are, by using these fonts, that a majority of your surfer’s devices will have these fonts available (Windows Font name, Mac Font name(s), Generic Font Family (font-family property)):

Arial, Arial, Helvetica, sans-serif
(font-family: Arial, Helvetica, sans-serif;)
Arial Black, Arial Black, Gadget, sans-serif
(font-family: ‘Arial Black’, Gadget, sans-serif;)
Comic Sans MS, Comic Sans MS, Textile, cursive
(font-family: ‘Comic Sans MS’, Textile, cursive;)
Courier New, Courier New, Courier, monospace
(font-family: ‘Courier New’, Courier, monospace;)
Georgia, Georgia, serif
(font-family: Georgia, serif;)
Impact, 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 New Roman, Times, sans-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;)

(There are probably a few more not mentioned here.)

These cross-platform fonts can simply be added to a (child) theme’s style.css file by using the font-family property above. An example of adding Arial to an entire site would be:

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

or to an element (in this case a paragraph):

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

The CSS font-family property

The font-family property specifies the font for an element. It can hold several font names as a ‘fallback’ system. If the surfer’s browser does not support the first font, it will try the next font, e.g.:

p {
  font-family: Arial, 'MS Sans Serif', sans-serif;
}

The generic font family (serif, sans-serif, monospace, etc.) should always be last on the list and will be selected if no other fonts are available.

Each font in the font-family property should be separated with a comma. When a font name has spaces (e.g. MS Sans Serif), it must be quoted with single quotes.

Using Google Fonts

As mentioned earlier, Google Fonts is an interactive directory of free hosted application programming interfaces (APIs) for web fonts. In addition to downloading and installing a font locally on a device, a chosen font can be added in one of two ways to a WordPress site:

  • By ‘calling’ it each time a web page loads
  • By downloading and storing it on the website / web server itself

If you are speed conscious (which you should be), the second option is the better/faster one. The font still needs to be downloaded and loaded to the page, but there’s no external calls for this to happen.

Google Fonts
Google Fonts – after selecting the desired font.

‘Calling’ a Google Font

After selecting the font of your choice, Google Fonts will give a few options. See the Roboto font shown above.

To, for example, add the Roboto font to a WordPress website, the embedded code needs to be added to the (child) theme’s header.php file and the CSS rule needs to be added to the style.css file’s font-family property.

By going to Customize, different (optional) versions can also be chosen. Usually, only regular, bold and italic fonts are used on a site – so these can be checked. These versions will now also be added to the embedding code.

To embed the code, it must be added to the <head></head>section of the header file:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">

The font-family property is be added to the style.css file in any way it is needed, e.g.:

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

or

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

As mentioned earlier, this is not the best way to add Google Fonts to a WordPress site, but is easy to incorporate and saves a bit of space on the hosting server.

Storing a font locally on a WordPress site

This process can be done with any downloaded font, not just fonts downloaded from Google Font.

After selecting the font of your choice Google Fonts will give you a few options. Again, see the Roboto font shown above.

To, for example, download the Roboto font, click on the download button on the top right of the selected font box.

When opening the Roboto.zip file there will be multiple variations in the form of .ttf files. To stick to the regular, bold and italic fonts, only extract the following files to a known directory:

  • Roboto-Regular.ttf
  • Roboto-Italic.ttf
  • Roboto-Bold.ttf
  • Roboto-BoldItalic.ttf

The font files need to be converted to EOT, OTF, SVG, TTF, WOFF and WOFF2 formats. This can be done at Simple Online Web Font Converter.

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 a CSS rule to be added to the (child) theme’s style.css file.

Simple Online Web Font Converter will respond with a downloadable .zip file again. Do this for all 4 .ttf files.

Copy all the font files from the zip files into the WordPress themes font directory (i.e. /public_html/wp-content/themes/fonts). The font files will be under a separate font directory in the .zip file.

Copy the CSS font-face rules from the style.css file into the (child) theme’s style.css file:

/* Roboto regular */
@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;
}

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

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

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

The font-family property is added to the style.css file in any way it is needed, e.g.:

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

or

p {
  font-family: 'Roboto', sans-serif;
}
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

Get WP Toolset – for custom WordPress development without programming
Get WP Toolset – for custom WordPress development without programming
18 February 2020
Ad: Extend the functionality of WordPress with regards to its ability to store data and publish it on your website. More…
Getting started with private projects on Raspbian and Bitbucket
Getting started with private projects on Raspbian and Bitbucket
28 October 2018
Bitbucket is a great alternative to Github to start, store and track simple programming dependant project files. On a Raspberry Pi it can be simply done using Raspbian. In addition to Github, 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…