Add Custom Fonts To WordPress Using @Font-Face And CSS

This is my first tutorial on typography. In this article we will discuss how to add custom fonts to wordpress websites using @font-face and CSS. The steps discussed below is easy but for designers. I will try my level best to explain the process in the simplest manners.

But before we move any further, we should know the best fonts combination. It has been usually found that Google Chrome ( my maximum number of visitors uses this browser ) does not render web-fonts nicely. But by using the combinations we can get better and satisfied results. The best place to find free fonts is Google WebFonts and Font Squirrel.

Remember that, we are not going to use import function. We will be using @font-face. This function is used only when you try to import fonts from local directory ( located in your website’s folder ).

Before we proceed please take these precautions :

• Create a backup of your stylesheet ( style.css )
• Make sure the fonts you use are either free or you have bought it legally
• Use this method only if you use any CDN ( content delivery network ), or if your website is hosted on powerful platform

How To Add Custom Fonts To WordPress

So lets get started. I have explained the whole process in step wise process. You have to just follow them and you will see your result. If you consider me, then I have performed this step using the self hosted wordpress. You can also get one using the free tool WAMP ( server ).

• Download the free Wamp server
• Then Download Latest Version Of WordPress.
• Unzip and place wordpress folder in the ” www ” of wamp folder

Please refer To This Guide : How Install WP Locally. Then finally scroll down to bottom of this page.

Our Stop To @Font-Face Generator

• Download the fonts of your choice from free free sources
• Now unzip them.
• Then move to @Font-Face generator
• Now upload your fonts ( before uploading please read the EULA agreement )
• Then finally click on ” Download Your Kit “

You can see in the image above, you will get three different options to optimize your fonts. They are Basic, Optimal and finally Expert. They all optimize your custom typography in their own custom ways.

Now when you download the KIT, it will be in zip format. Inside it you will see a demo file in it. It must be in HTML format. This demo page will even guide you how to use the custom CSS which will be provided with the kit.

Add The @Font-Face To CSS File ( Style.css file )

Now either use your self hosted wordpress, or move to your blog’s theme editor. Their you will see the style.css file. We have to edit this file and have to add the custom styles in it.

• Please create a new folder within your theme folder. ( let the folder name be ” typography ” )
• Now copy all the files with .eot, .svg, .TTF, .woff formats in that typography folder
• Now move to your theme editor.
• Copy all the lines in style-sheet, which was included with the KIT
• Now just copy all the lines in that file

In my case I got the codes listed below :

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

Now I will copy whole of them and just paste it to the top area of the theme’s CSS file. Below i have added the screen shot.

Ok so finally pasting is completed. But still our site will not be able to call these custom fonts. the simple reason is that, we have not specified the correct directory link. We know our folder name was ” typography “.  So we will do something like this :

Now once this process is completed. You can simply save your file. But it will still not bring any changes to your blog’s typography. You have to change the block’s font-style. In order to do that, you have to find ” textarea ” in your CSS. Somewhere close to this word you will also see typography styles. Just check the screenshot provided below :

So finally our work is completed. In the same manner you can add the custom fonts to almost every block. I mean with this you get the power to control your typography. The complete power lies in your hand.

I Want To Move On Easy Path

But if you wan to move with easier method, then just use the Google’s import function. Just paste the code and change the font name to the appropriate one. Sounds too tough, don’t your worry. I have already discussed this method, so you can refer to this article : Add Google Web Fonts To WordPress. I wish my guide would be useful for you for adding custom fonts to wordpress. If you have any questions, then please ask it in the comment area.

Related posts:

Add Google WebFonts To WordPress Add Widgets To Footer In Thesis Theme Customize & Reposition Genesis Breadcrumb WordPress Custom Permalink : Better SEO How To Add Widget In Genesis Child Theme