How to Embed Your Favorite Fonts to HTML Site or Blog

Creating great looking Headings and Titles has been a big challenge for marketers. Many of us have just been happy using the old standby fonts of Arial, Verdana, Times, etc; but that gets boring very fast. The next logical step has been to use a graphic in place of the text.  While this looks great, it takes much longer to download, and you can’t edit the text on the spur of the moment. Using a graphic doesn’t work very well for a blog format, where you have a new title every time you post.

Finally with the new features of CSS 3 and support in the newest internet browsers, we can embed True Type Fonts in our web designs, using CSS. This allows us to be creative, and to design pages and layouts that look fantastic, without requiring the painstaking work of creating graphics for everything. This can save us a lot of time. As an internet marketer, you don’t want to be spending all of your time creating graphics, when you should be creating content and communicating with your market.

Setting up to use embedded fonts does require a little work up front. Here’s the steps to start using embedded True Type Fonts on your websites:

  1. Prepare the font file that you want to use in *.ttf file. ( It would be great  if you already have the *.eot file)
  2. Convert your *.ttf file into *.eot file using this Web Font Converter (http://www.kirsle.net/wizards/ttf2eot.cgi). (You can skip this step if you already have the *.eot file of your font)
  3. Once you already have the *.eot file, upload the *.eot file into you website.
  4. Define your font on the CSS file like the example below and make sure you define the URL correctly. You could also add another font attribute if you like.
    embed-font-1
  5. To set these fonts to be used within a specific class or division, there are two ways. One method is to set it normally through a tag rule and the other one is to give the font a class statement so you can use the font on a specific tag or division.
    Method 1
    embed-font-3
  6. To use the font, you just need to call it using class tag. For example :
    <div class=”bradley”>This would be Bradley Hand ITC font.</div>
  7. The result should be showing like this.
    embed-font-4

By adding embedded True Type Fonts to your sites, your pages are going to load faster, look better, and be much easier for you to maintain. The only negative you need to be aware of is only the newest web browsers support CSS 3’s embedded True Type Fonts.  Currently it requires Firefox 3.5, Opera 10.0, and greater, most versions of Internet Explorer have support for the embedded fonts. If your reader is using an older browser, they will not see the format you intended. It would be a great idea to check out your sites with a range of popular browsers to make sure how it will appear. Most times the browser will switch to a default font, and the blog will at least be readable.

You should start using embedded fonts today, so your sites are easier for you to work with, faster to download, and you are prepared as everyone switches to new internet browsers.