Just Creative

I’m Jacob Cass, the founder of JUST™ Creative. I’m a multi-disciplinary graphic designer, working with clients all around the world. My specialty is logo & brand identity design. JUST™ Get in touch.

Love


How to Use Custom Fonts with @font-face on WordPress

Posted on

This is a guest article by Matt Russell.

Using custom fonts is a fantastic way to help create a unique look for your site. There are currently a number of different methods for embedding fonts onto a website several of which rely on paid third party services.

This tutorial details how to use the @font-face expression on a WordPress site to embed a font stored locally rather than by any premium solution such as Typekit or Google Webfonts.

To keep things simple I will be using a fresh WordPress install with the default twentyeleven theme, though this method is applicable for any theme. This is how the site looks before changes have been made.

Wordpress Before

BEFORE: WordPress TwentyEleven Theme

1. Select A Font

I will be using the free Carbon Block font. With any free or premium font it is worth checking the terms and conditions to see if it is eligible for use on your site.

Carbon Black Font

Carbon Black Font

There is not currently a standardised file type for embeddable fonts across browsers with older versions of Internet Explorer using the proprietary .eot format and iPhones using .svg. Most modern browsers do support Web Open Font Format (WOFF) and TrueType (TTF) but to ensure that the widest possible variety of devices will display the font correctly, multiple formats need to be available.

2. Convert The Font to @Font-Face

It is possible to convert a font to all the needed formats yourself however it is far simpler to use Squirrels @font-face generator. This will convert your chosen font to all the formats needed and will generate the CSS code you will require.

Font Squirrel @font-face Generator

Font Squirrel @font-face Generator

You will need your chosen font in .ttf or .otf format. After adding your font to the generator with the “Add Fonts” button select optimal and tick the agreement. You will be able to download a .zip file with the font formats required, a .css file and an .html test file where you can check the font is being rendered correctly. The .css file will look something like below.

Font Squirrel Generated Code

Font Squirrel Generated CSS Code

This code is almost ready to use, font-family can be changed to whatever you would like the refer to the font as in the stylesheet, though leaving it as the font name can help avoid confusion if you start to use multiple custom fonts. The src is the location for the font which you may want to change, I will cover this later.

3. Upload Font Files To Your Site

The next step is uploading the font to your site, first make sure you backup the theme you will be to adding the font to. The four files you need to upload are the .eot, .svg, .woff, and .ttf formats from the downloaded .zip file. The fonts should be uploaded to the base directory of you chosen WordPress theme.

FileZilla File Upload

FileZilla File Upload

4. Edit Source Location

I have put the fonts in a folder named “fonts” folder to keep things neat, though this requires some changes to the @font-face code. “fonts/” has to be added to the beginning of each font location as in the example below.

Code Theme

Addition of fonts/ to the source.

5. Define Back-Up Fonts

The code can now be included in the beginning of the sites stylesheet and referenced as any standard font would be. It is important to include some additional fonts in case for some reason the browser is unable to display the local one.

CSS Header

Once included, the custom font should now display across a wide variety of browsers.

6. Custom Font Installation Complete

The Result: Custom Fonts

The Result: Custom Fonts

If you switch themes frequently but want to keep the font then you should upload the font files to the “/public_html” folder of your WordPress site. The new stylesheet will of course need to be updated with the @font-face code, with the difference being that the src uses an exact URL.

Do you have a preferred method for implementing custom fonts or know any other useful tools? Let us know in the comments.

This post was written by Matt Russell MD of WebHostingBuzz, who offer Shared, Reseller, and VPS web hosting services. You can follow them on Twitter @webhostingbuzz.







44 JUST™ Creative Comments

  • Gord Grisenthwaite

    Nicely put. One thing I have noticed is I tend to get better results with web fonts when I use absolute urls (http://www.domain.com/fonts/fontFamily/) to call fonts in my stylesheet. I collect all of my web fonts inside one folder on one of my websites and then point the stylesheet to the appropriate fonts.

    Also, Google Fonts provides over 500 free fonts and font families, and generates the necessary link and CSS snippets, providing a great introduction to using web fonts.

    A small drawback to loading web fonts is that there can be a few second delay before seeing the copy, as the browser gets the fonts.

  • FabioSG

    good article, simple and well explained.

    i’m already using @font-face for some of the projects i’ve been working on, and i have to say that beside the few seconds delay Gord mentioned, i found yet another problem.

    Well it’s not exactly a problem but it keeps buging me… even though the font displays as expected, on firefox’s error console i keep geting an error:
    “downloadable font: download failed (@font-face { font-family: etc, etc…”

  • Fae Binkley

    i’m already using @font-face for some of the projects i’ve been working on, and i have to say that beside the few seconds delay Gord mentioned, i found yet another problem.

  • Derrek

    I’ve tried other tutorials to implement custom fonts on my website and yours is the first one to have actually worked! Thanks for this. It was really helpful and the perfect solution to a problem I’ve been facing for a week now.

    I love Open Sans and League Gothic and just had to have them on my site’s core design. :)

  • Toshiko Lessard

    i’m already using @font-face for some of the projects i’ve been working on, and i have to say that beside the few seconds delay Gord mentioned, i found yet another problem.

  • Rasheeda Burrow

    I’ve tried other tutorials to implement custom fonts on my website and yours is the first one to have actually worked! Thanks for this. It was really helpful and the perfect solution to a problem I’ve been facing for a week now.

  • sajjad

    Good article, simple and well explained. Thanks for sharing.

  • Wen Fife

    I love Open Sans and League Gothic and just had to have them on my site’s core design. :)

  • Paul D. Mitchell @ web consulting

    Just wanted to say thanks for all the useful info. I really appreciated the breakdown of the code, that really helped me understand the process more clearly. Well done.

    Regards
    Paul

  • Lavette Gaylord

    i’m already using @font-face for some of the projects i’ve been working on, and i have to say that beside the few seconds delay Gord mentioned, i found yet another problem.

  • Ana Hill

    Thank you for your detailed and succinct instructions. Worked for me on the first go.

  • Agus Nugraha

    Thank you Jacob for this badass tutorial!

  • Keely

    THANKYOU for the post – simple and clear, and it worked. Other posts I tried didn’t work – really frustrating and a waste of time. So again – thankyou !!!

  • Ananda

    I am just designing my first WordPress Theme template and your tutorial really helped me to embed the fonts.
    Very clear instructions! THANK YOU!!!

  • Nick

    Hi!

    Thanks for the tut! Was really helpful only my theme doesn’t recognize the font at all. I want to use helvetica neue (bold for the heading) regular for the body text. And somehow the fonts from the premium theme get shown instead.

    Do you perhaps know how to make my custom fonts show instead of the fonts that come with the theme?

    Thanks in advance!

    Nick

    • Gord

      Hi, Nick. In order to use Helvetica Neue on the web, you’ll need to purchase a web font license. Desktop and web font licenses are different. There are differences in the fonts, too. Web fonts, for example, tend to be a little taller and have slightly heavier strokes than the desktop version. If you’re an Adobe Creative Cloud subscriber you may be able to get a web font similar to Helvetica Neue from Typekit, which is included with a Creative Cloud Subscription.

  • Ben

    Thanks for the easy and great tutorial.

  • JJ

    If squirrel states that a font is not allowed to be changed to @font, then what? You cant use that font? Font in question is HelveticaNeue.

  • ez-pz

    Thank you for the great tutorial! I got everything done unto step 5.. I’m new to building sites, and I feel like a dummy for asking this, but which stylesheet should I edit? I am using the enfold theme on WP. Thank you so much for sharing!!!!

  • Reinaldo Filho

    Thanks for the tutorial but it behaviours as always the same, it loads properly in the first load, when you refresh the page the font simply disappear.

    It has the same behavior when you load the font remotely from Google.

  • Ali

    What Url Address i have to use for my fonts directory in css file, i have create a directory in theme folder named ‘fonts’ and put all 4 fonts files in it.

    • Gord

      I’d been using the absolute URL. It’s worked well on my testing server, but not so well on the live site. Browsers such as Firefox won’t load web fonts unless they’re local and linked relatively, i.e.: fonts/webfont_name/web_font.eot. However, web fonts from Google or Typekit work.

  • IT Seba

    I was in trouble about how to use font face on wordpress, now fixed. Thank you for sharing :)

  • azen0r

    Thank you, very useful !

  • Bruno

    This doesn’t work. I did everything per the instructions and the font I put in still never shows up. I’ve now tried it with 2 or 3 different fonts. Nothing. This is probably outdated.

  • iogurumi

    Hi Matt, I followed your tutorial perfectly but I have a problem :(
    I can see my custom fonts on my site only on my computer! In another computer, where the font is not present, the site appears without my custom fonts… where is the problem?
    I uploaded the font in the folder /fonts in my folder theme, I edited the path on font-face in style.css and doesn’t work. I tried also to put in the code font-face in stylesheet.css and nothing… it doesn’t work.
    What can I do?

  • Sean Vandenberg

    Thanks so much, Jacob— this is the best article I found on the subject. Much appreciation; loving my custom fonts! – Sean

  • Paul

    Great stuff! solved my issue in no-time!

  • Lisa

    Thank you for the tutorial! It’s the best one I’ve seen and at this point, I think I’ve seen them all! :)

  • Darius

    exactly what i needed.

  • Khuram Shahzad

    Thank you very much for great info after read or use this method to fixed my website fonts



© Copyright JUST™ Creative 2007-2013. Designed by Jacob Cass. Powered by Wordpress using the Skeleton Framework. Fonts served by Typekit. Site hosted by (mt).