A better way to add fonts to a WordPress site

A better way to add fonts to a WordPress site
Published: by Renier Delport
Collection(s): Website Development

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

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

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

or

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

More website development related posts

Try one of Lynda.com’s online software and skills learning courses
Improve your knowledge on anything from programming to business skills with Lynda.com’s huge range of professional video courses.
22 November 2017 | 5 401 reader(s) found this helpful so far.
Using Cron for scheduling tasks
Using Cron for scheduling tasks
See #howto use Crontab for scheduling computer tasks... #Cron #RaspberryPi
30 June 2017 | Updated 11 July 2017 | | 5 reader(s) found this helpful so far.
Twitter App settings to access the API
Twitter App settings to access the API
See #howto create and setup a Twitter App to be able to use its #API...
31 May 2017 | Updated 1 June 2017 | | 2 reader(s) found this helpful so far.
Facebook App settings to access its Graph API
Facebook App settings to access the Graph API
Want to start using the #Facebook #API? See my App settings to access the Graph API
17 March 2017 | Updated 31 May 2017 | | 2 reader(s) found this helpful so far.
Eclipse IDE for Python developers
Eclipse IDE for Python developers
See how to get started with #Eclipse #IDE for #Python developers...
7 December 2016 | | 3 reader(s) found this helpful so far.
Getting Started with Wordnik's Word & Worldlist API
Getting Started with Wordnik’s Word & Worldlist API
#Gettingstarted with Wordnik's word & Worldlist #API...
16 May 2016 | | 4 reader(s) found this helpful so far.

Save, share, comment & 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 shit. Keep it constructive and polite.
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponShare on Tumblr

Comment via Facebook

Disqus

About the author

Renier finds himself busy with creative web design and his websites, motorcycling, photoshopping, micro electronics, non-commercialised music, superhero movies, badass series and many other things that are not interesting to most people.