A better way to add fonts to a WordPress site

A better way to add fonts to a WordPress site

With more advanced styling options available to us, it makes sense to be able to add unique fonts to our websites too. This post will show a better way to add fonts to a WordPress website. With this guide, choosing the right font for your website should be based more on the styling, and less on the availability.

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
  • Style
  • Price (if not a free font)
  • Legibility
  • Digital size
  • Source


In WordPress, the font to use (in the form of font files) can either be called for from another site, stored on the website itself, or being drawn from the surfer’s browser font collection.

Using a font from your computer

Each device with an operating system comes with its own set of fonts. Document processors, e.g. Microsoft Office, LibreOffice, Open Office etc. might come with a collection of additional fonts. If you’re into writing a lot, chances are that you’ve already downloaded and added even more additional fonts to your system.

These fonts are stored somewhere in your operating system’s fonts directory and will be visible almost anywhere on your computer – including the web browser.

You can still use them, but if they turn out not to be a cross-platform font (see later), these fonts might not, and probably will not, be available for your website’s surfers. Who’s to say that they have the same operating system, document processors and/or downloaded the same fonts than you did?

Even so, the names of these fonts can be added to your (child) theme’s style.css file with the hope that the surfer has the same font on his/her’s browsing device (see later).

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(s) first.

Once again, if not a cross-platform font, these fonts will very likely not be available for your surfer’s browsing device. These fonts need to be either called for from the internet or stored on your 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. If a developer does not want to store the font on his/her website itself, Google Fonts allows web calls for these fonts too. WordPress websites can call fonts through the (child) theme’s header.php file (see later).

Using cross-platform fonts

As mentioned earlier, each device’s operating system ships with a bunch of default fonts. At least Microsoft and Apple has agreed, to some extend, to have some of their shipped fonts in common. These are the cross-platform fonts that will be mentioned here.

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, it must be quoted with single quotes.

Using Google Fonts

Google Fonts is an interactive directory of free hosted application programming interfaces (APIs) for web fonts.

A chosen font can be added in one of two ways to your WordPress site:

  • By ‘calling’ it each time your site is shown
  • By downloading and storing it on the site itself

If you’re 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 you 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 code. When no version is selected

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;}


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 a downloaded 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;}


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

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
15 October 2019
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…
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…