Have you ever come across a font on a website and wish that you could use it for your own site but just don’t know how to do it? This WordPress Add Font Tutorial should help!

Follow this simple step by step tutorial where I’m going to show you how to add any font you want on your site (as long as you have access to the font file).

1) Get the font file

There are many great fonts available for free. There are the google fonts of course but I also like to use http://www.fontsquirrel.com/ as a free resources for font. http://www.dafont.com/ is another popular free font website. Just find the font you like and upload it to your computer.

2) Upload the font(s) to Webfont Generator

Font squirrel has a great free tool that lets you generate the code needed to easily add a font to your site.

Once you have the font file, go to http://www.fontsquirrel.com/ and click on Webfont Generator

Click on add Fonts and add 1 or more font files (otf, ttf are ok formats) and check the box “yes the fonts I’m uploading are legally eligible for web embedding” checkbox.

3) Click on Download your kit

Click on the “download your kit” button to download a zip file to your computer. The name of the file will look something like this : webfontkit-20130714-183422.zip

4) Unzip the webfont file to see all the files contained in it

To unzip the file, just double clikck on it. You’ll see that it contains several files and a folder.

the 4 files that end with eot, svg, ttf and woff and 4 different formats of the font. You will need to copy these files on your server (see next step).
The stylesheet.css file contains the css that you will need to add to your website in order to be able to use the font.

5) Copy the font files to your server

You will need to login to your hosting control panel or ftp account in order to access the server where your wordpress site is installed.
Once in your wordpress folder (this is where you can see the folders wp_content, wp_includes,…), click on create new folder and name it “fonts”.

Click on it and upload the 4 font files that you have in your webfont kit.( You’ll have more files if you added more than 1 font in the webfont generator).

6) Add the css code to your WordPress site

Open the stylesheet.css file that is in the webfont kit folder. It should look like this (you’ll have more than one font face if you downloaded more than 1 font in the webfont generator) :

The code assumes that you have put your font files directly on your public_html folder, which is not good practice, you want to keep your files organized, that’s why we put all our fonts in the folder called fonts. So now we need to change the path of the fonts so that the browsers know where to find them.

So the code below needs to be modified:

@font-face {
font-family: ‘misoregular’;
src: url(‘miso-webfont.eot’);
src: url(‘miso-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘miso-webfont.woff’) format(‘woff’),
url(‘miso-webfont.ttf’) format(‘truetype’),
url(‘miso-webfont.svg#misoregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

now becomes

@font-face {
font-family: ‘misoregular’;
src: url(‘http://yourwebsite.com/fonts/miso-webfont.eot‘);
src: url(‘http://yourwebsite.com/fonts/miso-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://yourwebsite.com/fonts/miso-webfont.woff‘) format(‘woff’),
url(‘http://yourwebsite.com/fonts/miso-webfont.ttf‘) format(‘truetype’),
url(‘http://yourwebsite.com/fonts/miso-webfont.svg#misoregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}
Depending on the theme that you are using, check the theme options to see if you can add your own css. If you’re using headway you can go to the design editor and click on live css then add the code to the top of the live css.

If you can’t find a place to add custom css on your theme, you should create a child theme as it is not good practice to modify the theme itself (for obvious future update issues). If you don’t know how to create a child theme, ask a developer to do it or if you want to take the risk to modify your existing theme css file, I’m providing instructions on how to do so. (WARNING: if you decide to do that, make a copy of your css file before you modify it).

Your theme css file can be edited by going to your WordPress dashboard under Appearances/Editor and scrolling down the bottom right to style.css.  If you have a child theme, it will be the same.

One you’ve added your code  click on “Update File”.

7) How to use the font on a post or page

Now you are ready to use the new font on any post or page on your site.

You’ll need to use the font-family field from the css code you added.

On any page or post you can then do:

And we’re done!!!

I hope you loved this WordPress Add Font tutorial!

Adding fonts to your website should have no more secrets for you now! If you have any questions, post them below, I’d be happy to answer them 🙂

If you found this WordPress Add Font tutorial helpful please share it with your friends!!