In some cases, you can’t use Google Fonts or the standard fonts on your WordPress website.  A few of the newer themes will give you options to upload your own font and will render the fonts for you, but for the most part, we website developers need to load the fonts manually. Here is an easy way to do this.

Gather the font files

First, you will need all of the font files for this font.  You will need the EOT, SVG, TTF and WOFF files.  If you are downloading from fonts.com or another source such as this, they should have this as a download kit for you.

Upload the fonts to your host

Using Filezilla or some other FTP manager, go ahead and FTP into your host.  The font kit you downloaded will have the EOT, SVG, TTF and WOFF files in a folder.  That is the folder you want to upload to the ROOT of your website.  So this folder will appear next to your wp-admin, wp-content, etc folders.

Add the code to your header

Next, you should be given some code to put into your header that will contain the code which will load the fonts into the browser.  This code needs to be put into the header. If you have a theme that allows you to load some code on all pages in the header such as Canvas from Woothemes.com, great. If you don’t, then download a great plugin such as Header and Footer.  If you use that plugin, under Settings you will find Header and Footer.  Paste in your code right there and save.

You will need to change the path to the file to be your FULL DOMAIN NAME – full URL.  (You may notice here I do not have http: or https: listed.  Curious why?  Have an ecommerce site? Check out this article which explains all why i don’t have http: or https: in the path).

Use css to style your text

Next, you need to tell your headings (h1, h2, h3, etc) or your body text (body p)  to use this new font. Browse to your child theme editor under Appearance > Editor and modify your custom.css or style.css right there. If you don’t know what a child theme is, you should get familiar with that subject before you begin modifying your stylesheet.  In this file, you need to reference the EXACT font name that the files are referencing in the code you pasted into the header.  So, using this example, if you look at the image above by clicking on it to make it larger, you will see that I need to reference the fonts like this in my style sheet:

Check your site. You may need to refresh your page, or use an !important tag in the css.

If you have an ecommerce site and you need to load the fonts on the checkout page (https://) as well, you should check out my other article on how to fix any display issues!