Adding Custom Fonts to WordPress with @Font-Face and CSS

To totally unlock this section you need to Log-in

Login
If you have started to edit the CSS of your WordPress theme you probably know that you can change your font style of any site element by using the font-family selector. For instance, to change your site’s title font, you might use the following code inside the theme style.css file:

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

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

For example, if you wanted to use some really cool karate type font simply changing the font family as shown above is not going to work because the system doesn’t know how 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 no shortage of custom fonts on the web, but you must be careful where you source these files because many are littered with viruses and malware.

Generally, you can download fonts from two places: Dafont and Google Fonts Directory.

To totally unlock this section you need to Log-in

Login