Using @font-face to add custom font to your headway wordpress site

in Categories Headway Theme

There are times that Google font doesn’t seem to work for you, and so an alternative way would be to use @font-face function to your wordpress powered site to accomplish the job.

The process is rather simple but but is a little lengthy one (at least in my own point of view).

Here are the process.

  1. Get the @font-face kit of your selected font.

    furore-web-fontOne good place to get it is the fontsquirrel, this site offers tons of free web fonts for downloads, so check it out. Note that there are a lot of free web font provider / host out there. Some are free and some are not. Just do some googling and you can land one.  For this discussion I am going to download the “Furore” font for use in all of my heading tags. So I go ahead and click “Get Kit”. This will give you a zip file, go ahead and unzip it.

  2. Put all the font types inside your theme.

    font-files

    Your kit should contain a couple of files, but don’t bother too much this would be easy. Just create a new folder in your theme then add font files inside the folder. It should include the EOT, SVG, TTF and WOFF files.

    Note that you can also create the folder in your root directory so you can use it in any theme, but this requires that your css be pointed to your root directory.

  3. Add the @font-face rule in your css file.

    In your downloaded file, there should be a file called “stylesheet.css”, go ahead and open it, copy the rule and paste it inside your theme css. From there you can now use the “font-family: ‘FuroreRegular’, serif};” wherever you want inside your css file.

/*Custom Font*/
@font-face {
    font-family: 'FuroreRegular';
    src: url('Furore-webfont.eot');
    src: url('Furore-webfont.eot?#iefix') format('embedded-opentype'),
         url('Furore-webfont.woff') format('woff'),
         url('Furore-webfont.ttf') format('truetype'),
         url('Furore-webfont.svg#FuroreRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body p {
	font-family: 'FuroreRegular', serif};
}

There you have it, it should be working as expected!

Note: Should by any chance you can’t find a good font readily available as web font, you can always try some of a good online web font converter such as this. But please be weary of the licensing of your font. It might not be free. Goodluck!

Any comments, corrections and violent reactions are welcome.

Leave a Comment