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

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.

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.

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.

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.

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.

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.

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.

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

6. Custom Font Installation Complete

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.

---

© This article is copyright of JUST™ Creative and should not be found elsewhere.