Change font to custom @font-face on Wordpress

Last time we created a @font-face kit with an online @font-face generator, this time we will put a no-web font to a Wordpress site.

I want to change this plain old boring font for my vertical menu to something more funky.

Click here to find out how to create a @font-face kit for a custom non-web font.

Now upload the fonts (files with .eot, .svg, .ttf, .woff extensions) via ftp ...

Click here to find out how to use the FileZilla ftp client for transferring files from or to a website.

... into the home folder of the theme you are using on Wordpress.

I'm using a theme called solo so I uploaded the font files into /wp-content/themes/solo folder on my Wordpress web server.

Click here to find out how to upload files via ftp client.

We need to edit the style.css.

Style.css is also in the theme home folder. You can download it again via ftp and edit it on your computer. It's always a good idea to backup or rename the style.css file before you changing it.

Open style.css in a text editor.

You can use Dreamweaver or some other text/code editing software. Try out Notepad++ it's pretty awesome and free.

Put the following lines somewhere at the beginning of the code:

@font-face{
    font-family: 'suplexmentary_comic_nc-webfont';
    src: url('suplexmentary_comic_nc-webfont.eot');
    src: url('suplexmentary_comic_nc-webfont.eot?#iefix') format('embedded-opentype'),
    url('suplexmentary_comic_nc-webfont.woff') format('woff'),
    url('suplexmentary_comic_nc-webfont.ttf') format('truetype'),
    url('suplexmentary_comic_nc-webfont.svg#webfont') format('svg');
 }

In your case it's going to be some other font, so instead of suplexmentary_comic_nc-webfont, you must put the name of your own font. The easiest way is to open the stylesheet.css that came with your @font-face kit and copy/paste the lines to style.css. Don't forget the closing bracket }.

Now we need to change the font of the text on the website. All you need to do now is to find your style settings of the div or the part of your homepage where you want to change the font and enter font-family of your new custom font:

font-family: suplexmentary_comic_nc-webfont;

suplexmentary_comic_nc-webfont is going to be something else in your case.

Save all the files you changed.

And upload them to a website server on the same location you downloaded them from.

And if everything went according to a plan, when you refresh your website, you should be able to see your new fonts.