Mar

How to Customize fonts in WordPress blog with CSS3

admin

css3, font, free, howto, tutorial, Wordpress

Fonts type that can be used for Safari, Chrome and Firefox3.1+ are .ttf(True Type Font) and.otf(open type font). Both support the @font-face rule that allows stylesheet to point to a .ttf or .otf on server. IE has little problem with .otf. After declaring the @font-face rule give reference 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 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“.
There are lots of websites where you can find Free and useful resources.

1. For @Font-face friendly fonts: Font Squirrel

2. Fonts available for @font-face embedding: Web Fonts

3. OpenType for your desktop and webfonts: Font Spring

Font resource Compilation:

Free-fonts-collection

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.