Custom Fonts in WordPress with CSS and Font-Face

If you’ve begun to edit the CSS of your WordPress theme you almost certainly know that you simply can make positive changes to font style of any site element by using the font-family selector.

For instance, to change your site’s title font, you might make use of the following code inside the theme style.css file:

#site-title a {font-family:georgia;}

Easy right? Sure…but what when the font you need to use isn’t included in the list of available fonts using the standard WordPress installation.

For example, in the event you wanted to use some really cool karate type font simply changing the font family as shown above is not planning to work since the system doesn’t know the way to render a font it’s not familiar with.

Using non-standard fonts inside WordPress requires two additional steps:

  1. downloading and installing the font
  2. calling the font using @font-face

Downloading Custom Fonts for WordPress

There’s an abundance of custom fonts about the web, however you should be careful where you source these files because many are littered with viruses and malware.

Generally, I download fonts from only two places: Dafont and Google Fonts Directory.

Once you discover the font you like, download it and unzip the file. You should now have usage of a font file in .ttf or .otf format (more on that later), and also a readme file explaining the font’s usage and installation instructions.

To increase the risk for custom css work along with your newly downloaded font, you’ll want to install it on your server or WordPress file tree somewhere it will probably be safe. Generally, I like to produce a custom font folder within my theme file and set the custom font file there.

Once that’s done, make note of the font location/url on your own site and head up to your theme’s style files for some quick editing.

Adding Custom Fonts to WordPress with @font-face

The CSS selector @font-face allows you to add support for custom fonts by including the font file in your CSS file. To add custom support for nearly any custom font, type the following to your site’s main style.css file:

@font-face{
font-family:karate;
src:url('/www/wp-content/themes/thesis-bp-child/custom-1/fonts/Karate.ttf') format ("truetype");
}

Breaking Down the Code

@font-face

This simply tells WordPress you are likely to be defining a brand new font face. It opens the code.

font-family: karate;

This line tells WordPress you will be using the font-family selector with a name of “karate.” Of course, when the custom font you’ve chosen is named “Fruitcake” you’d put that in position of where I’ve written “karate.”

src:url(‘/www/wp-content/themes/thesis-bp-child/custom-1/fonts/Karate.ttf’) format (“truetype”);

This next line tells WordPress where to look for your font file with your WordPress file system. In my case, I’ve chosen to download the font and install the .ttf file within a folder named “fonts” that was placed within my theme folder. You can put your font folder anywhere you want, just be sure to use the correct url when referencing the source.

The last a part of this line tells WordPress what are the format of the font file. Two popular font file formats are .ttf (truetype) and .otf (opentype). Use the one which corresponds to your unique font file.

Change Fonts with Simple CSS

If you’ve followed the steps above you needs to have successfully added a custom font to WordPress, which is now able to be called using standard CSS font selectors. Simply input the name of the brand new font you’ve uploaded within the font-family selector like this:

#site-title a {font-family:karate;}

Voila! Your new custom font continues to be included on your site and can be accustomed to change any font within your site.

Facebook
Google+
Twitter
LinkedIn
Pinterest

No comment yet, add your voice below!


Add a Comment

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

Comment *
Name *
Email *
Website