If you’re a WordPress user, you may have used Cufon to make your titles appear on custom fonts. This isn’t a terrible way, but every extra plugin slows down your website. Plus, people who don’t use Cufon don’t have that option. So what can you do?
Thanks to CSS 3, you can simply use the @font-face rule to show anything you want in a specific font as long as you have the TTF.
First, you must locate the TTF file on your computer and make an EOT copy to ensure compatibility with Internet Explorer. You can use this TTF to EOT converter to get both files. Then, upload the files to your server. For my purposes, the TTF and EOT files reside in my theme directory. However, you might make a folder such as “current-theme/fonts” if you use many fonts.
Secondly, you must specif the location of the file on your server and the name you’ll use for the font in your CSS like the following.
@font-face
{
font-family: MyFont;
src: url('My-font.ttf'),
url('My-font.eot'); /* IE9 */
}
In this example, Â we’re going to use the font name “MyFont” and the font files are calls “My-font.” They’re located in the same directory as the stylesheet.
The next step is to actually use the
h1
{font-family: MyFont;}
All my h1s will use “MyFont” as the face. I can now use MyFont as the face for any element within my stylesheet. It doesn’t matter whether the viewer has the original font file on her computer.
Now, not all mobile devices support this method even when they claim to support @font-face. This is the case with IE9 on Windows Phones, the stock browser on Android 2.1 and Symbian’s Nokia browser. However, Safari on iOS4 and greater, Android 2.2 stock browser and all browsers on Android 4.0 seem to be compatible. When the browser doesn’t understand @font-face, a default font will show  — either the system default (when you haven’t specified a body font) or the default font face you use for your body.
This is still better than nothing, of course.
Let me know how this works for you!