Embedding Fonts In HTML

I've been told that 60% of any GOOD web design is clever use of typography....  

Embedded Fonts using ONLY CSS and HTML

As a web programmer, web designer, and graphics designer, one of the things I see a lot, is the need to include NICE fonts in websites.  Traditionally (pre Web 2.0 ::snicker::)  the developer would have to create an image of the font saying exactly what was wanted and then display the graphic.  This is very time consuming especially if you need to "CHANGE" what the text says, or even the font.... (a client spontaneously changes their mind... that never happens... ) 

There are several "hacks" that attempt to "cheat" and make the image for you.  Some use FLASH, some use server side image generation, and some even use clever javascripting.  But the big problem with all of them has been compatibility, time and resources. 

I will mention a few just for kicks... Cufon, FLIR,  and sIFR.  There are MANY more.

  • Cufon uses javascript to render the font.
  • FLIR (Facelift Image Replacement) uses javascript, PHP and the GD image library to generate images dynamically (usually low rez)
  • sIFR uses JAVASCRIPT, CSS, FLASH, and PHP. And can be daunting to setup. (There are several that do this type of action).

 

One of the biggest drawbacks I see of a lot of the techniques out there is that users CANNOT copy paste the text easily.

They all have their own unique benefits and drawbacks.  (I have spent days looking at these.) But I recently discovered that you CAN embed a font with STANDARD CSS, and have it work Cross Platform and Cross Browser.  It does require some foot work, but is much simpler than the "generated" options.  Many web companies are offering this as a "service", but you can quite easily do it for free.  (Well depending on the licensing of your fonts...)

There is a great article here about a lot of those services: http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

For you Do It Yourself folks:

For those of you who want to do it your self (like me...) Lets get started with the concept.

CSS has had the @font-embed tag for a long time.  The problem is getting it to work in all the various browsers the right way.

To do this you need to have your font in several formats. 

According to Devon Govett @ theme forest here is the font break down:

  • IE Supports: the EOT font format
  • Mozilla (and like browsers) support: TTF and OTF formats
  • Chrome supports: TTF and SVG formats
  • Opera and Safari support: TTF, OTF, and SVG formats.
  • Firefox 3.6 and higher supports the WOFF format. (according to Font Squirrel)

 

Make sure you have the licensing done right BEFORE you use your font online.

So, in order to do this yourself you need your font in at least 2 formats, I actually use all of them. This is the only way I know to convert the fonts at this moment, you can use "Font Squirrel".  Once you have converted your fonts here is what you need:  (place this in your CSS file)

@font-face { 
    font-family: 'Font Name HERE';
    src: url('path_to_EOT_FONT.eot');
    src: local('Font Name HERE'), url('path_to_SGV_FONT.svg') format('svg'), url('path_to_WOFF_FONT.woff') format('woff'),  url('path_to_TTF_FONT.ttf') format('truetype');
}

One you have that some where (in the beginning) of your CSS, you can then call your font file by name in your font specification.  Here is an example.  Lets pretend I was using a font named "Crazy Font 1" here is what my CSS would look like.

h1 {
    font-family: 'Crazy Font 1', Arial, sans-serif;
}

And now hura! All of your H1 tags are now in your crazy font.  This works in IE, Firefox, Opera, Chrome, and Safari.  There is a lot of reading to do about this topic.  I have spent days researching it and have only scratched the surface.  So read up, experiment, and enjoy.

Other Resources (and sources for this document):

If you are looking for some good reading on this topic here are a few of the resources I have found:

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

http://randsco.com/index.php/2009/07/04/p680

Page Information:
  • Tags: Fonts, TTF, EOT, SVG, WOFF, CSS, Embed, Font-Face, Cross Browser, IE, Firefox, Safari, Chrome, Opera
  • Description: An article about embedding fonts in your HTML via CSS and having it work cross browser and cross platform.