How to Customize Your WordPress Fonts with the Free Awesome Fontstacks Service

Awesome Fontstacks is a free service that allows you to easily create bundles of beautifully matching, free web fonts. The bundles are packaged with failsafe font stacks to back them up. Awesome Fontastacks makes customizing your WordPress site’s typography very easy. We’ll walk you through the steps of adding custom font stacks to your WordPress theme.

Step 1: Create a font bundle.

Go to Awesome Fontstacks and start by selecting a font for headlines. Next, you’ll be asked to select a suitable font for text, followed by a decoration font and then a monospaced font. You’ll be able to see a live preview of your selection at each step.

The other option is to skip the individual selection process and simply opt for one of their pre-made bundles.

Step 2: Download the fonts you selected and upload them to your site.


You’ll get a link to download all four fonts that you selected. Create a directory called /fonts and save them there. Unpack each of them and leave them in their own folders. Upload the /fonts directory to [public root]/fonts.

Step 3: Add the CSS to your WordPress theme.

Copy the CSS block from Awesome Fontstacks for your selected bundle. Paste it into the style.css file for your WordPress theme.

Now you have classes available for customizing your fonts. It’s as easy as adding the class to header and paragraph tags. For example, if you selected Yanone Kaffeesatz for your headers, you’ll add the class like this:

1
<h2 class="afs-yanone-kaffeesatz">

Or if you want to add the Dejavu Serif font to a paragraph tag, you’d have something like this:

1
<p class="afs-dejavu-serif">

The excellent thing about the Awesome Fontstacks service is that all the fonts are free and the bundle builder helps you select fonts that compliment each other. A custom font stack can make your site more visually appealing. Most of the process is copy and paste. With a little bit of basic CSS, you can give your WordPress site a font face lift in just a few minutes!

Tags , ,

Comments (4)

Participate