Adding Custom Fonts to WordPress

This is a guest post by PageLines community developer Gavin Aldrich

Beware the fonts…

Your website is the focal point of your visual identity, the window into your business. You should be able to express your creativity unreservedly, the last thing you want is to have your vision restricted by the fonts you can (or can’t) use. But, like the Jedi Force you must use fonts wisely. We’ve all come across sites where the designer should have been required to apply for a permit before they were allowed to rummage around in the font libraries. Nonetheless this is not a tutorial on typography, quite the opposite, today we’re going show you how to use a custom font of your choosing on WordPress.

Yes, Google has a gazillion fonts but do they have the one you really want? You could use Typekit, they offer some good packages and have a vast library to choose from but maybe not the one you want and searching through them takes time. There is another way, especially if the font you have your eye on is not yet available in a font library.

This article is for those interested in adding custom fonts to their WordPress site. Regardless of your level of expertise with WordPress or PageLines DMS, by the end of this article, you will be adding fonts as easily as sprinkling mozzarella on your pizza.

A simple method to use custom fonts in WordPress

If the font you want is not already in the list of fonts with WordPress, or in the gazillion Google fonts library, you’ll need to manually add the font to your installation.

Here we break the process down in a few easy steps.

Choose the font

Choose the font and download the OTF or TTF, you can find some unusual or off the beaten tracks fonts at Font Squirrel or DaFont. It’s also worth checking Creative Bloq as they often do a roundup of the best new fonts.

Convert the font

Once you have the font you will now need to convert it. You will need to upload the OTF or TTF files to a font generator. Those very nice people over at Font Squirrel have kindly made available an @Font-face generator.

Using the @Font Face generator will convert your OTF or TTF files into formats that will work on all browsers, mobile and tablets.

Here’s what you get:

  • TrueType Fonts
  • EOT fonts
  • WOFF fonts
  • SVG fonts
  • Demo.html and stylesheet.css

Simply set your options and then download your files.

Now you have downloaded the kit you need to unzip it and inspect the contents – surgical gloves are an optional extra! Inside the zip file you will find the font/s with the extensions (as you selected), a specimen folder and the style.css. You won’t need the specimen folder.

Add the Font

Now  add the contents of this folder to your server via FTP. Create a new folder, you can add this folder to ‘wp-content/uploads’ or within your child theme. Call the folder ‘Fonts’ or something similar. Add all the files you downloaded to that folder.

Add the CSS

Open your stylesheet.css file using your favorite text editor. I’ve just started using Sublime Text 2 which I am liking, I also like Brackets. You could of course use TextEdit.

You need to make one small edit before adding the CSS to your site. I’ve heard a few different opinions on this, some say that you don’t need to add the route path to the file in the CSS and some say you do. All I can say is I have tried both ways with DMS and found it more successful to add the route path.

So what you started with was something like this:

@font-face {
font-family: 'bariol_regularregular';
src: url('bariol_regular-webfont.eot');
src: url('bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('bariol_regular-webfont.woff2') format('woff2'),
url('bariol_regular-webfont.woff') format('woff'),
url('bariol_regular-webfont.ttf') format('truetype'),
url('bariol_regular-webfont.svg#bariol_regularregular') format('svg');
}

And all you need to do is add the path, i.e.

@font-face {
font-family: 'bariol_regularregular';
src: url('http://yourdomain.com/wp-content/uploads/fonts/bariol_regular-webfont.eot');
src: url('http://yourdomain.com/wp-content/uploads/fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://yourdomain.com/wp-content/uploads/fonts/bariol_regular-webfont.woff2') format('woff2'),
url('http://yourdomain.com/wp-content/uploads/fonts/bariol_regular-webfont.woff') format('woff'),
url('http://yourdomain.com/wp-content/uploads/fonts/bariol_regular-webfont.ttf') format('truetype'),
url('http://yourdomain.com/wp-content/uploads/fonts/bariol_regular-webfont.svg#bariol_regularregular') format('svg');
}

Now, add this CSS to your child theme stylesheet or the DMS custom editor.

Lastly

We’re nearly done, this is the last step and its a real easy one. You need to tell your theme to call your font. So just a little bit more CSS to add and you will be done. In DMS this is as simple as:

body {
text-rendering: optimizelegibility;
font-family: bariol_regularregular;
font-size: 16px;
font-weight: 400;
}


h1, h2, h3, h4, h5, h6 {
text-rendering: optimizelegibility;
font-family: bariol_regularregular;
font-weight: 600;
letter-spacing: 0px;
}

You can of course use other sectors and you could give each of the H’s different weights etc.

Now go knock yourself out and get creative.

One Response to "Adding Custom Fonts to WordPress"

Leave a Reply

Your email address will not be published. Required fields are marked *