How to Customize fonts in WordPress blog with CSS3

Before starting this tutorial, I would like to tell you a very important thing that Font designers work very hard to create fonts, their work is copyrighted and licensed. That’s why, keep in mind before embedding any font into your site, make sure you’re using truly “open-source” and free font or have the right to use them in your blog.

Fonts type that can be used for Safari, Chrome, and Firefox are .ttf (True Type Font) and .otf (open type font). Both support the @font-face rule that allows a stylesheet to point to a .ttf  or .otf on the server.  IE has little problem with .otf.  After declaring the @font-face rule give a reference (I hope you know how to give a reference in the stylesheet ) to your required font-family property in your stylesheet as following:

@font-face {
   font-family: MEgalopolis Extra; src: url(‘MEgalopolis-Extra.otf');
}

h3 { 
   font-family: MEgalopolis Extra, sans-serif; 
}

Reference:

@font-face {
   font-family: MEgalopolis Extra;
   src: url('MEgalopolis-Extra.otf');
}

Example: MEgalopolis Extra

The drawback of embedding fonts in the stylesheet is again licensing and infringement issues which you can handle with the sIFR (Scalable Inman Flash Replacement) method. There is a well-explained article on sIFR implementing the core method, you can find it at Mike Industries’s Blog “sIFR 2.0: Rich Accessible Typography for the Masses“.

Customize Fonts through WordPress Plugin:

There are a lot of WordPress plugins available to customize WordPress fonts out of the box. Some of the renowned ones are

1. Custom Fonts by Brainstorm Force
2. Fonts by Brad Dalton – WP Sites
3. Use Any Font [Freemium]
4. Easy Google Fonts by Titanium Themes
5. Better Font Awesome By Mickey Kay

Font resource Compilation:

1. 75+ Excellent Free Fonts For Professional Design

In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.

2. 20 High-Quality Free Fonts for Designers

Here are 20 high-quality free fonts for you to use in your designs. In this selection, you will find a variety of styles.

3. 40+ Excellent Freefonts For Professional Design

They have rounded up some of the top favorites of designers around the world. These fonts can fall in all categories when put to creativity by users with your wildest imagination.

4. 104 Free Fonts for Web Designers and Logo Artists

You’ll find Over 100 Free Downloadable Fonts for Web Designers and Logo Artists by which you can save money and focus on making great applications.