Wednesday, August 27th, 2008

Towards Using Custom Fonts

Category: CSS, Design

>A little while ago, we talked about the two competing custom font technologies for the Web: linking and “embedding” (aka EOT). With Firefox about to implement support for linking à la Safari, John Allsopp has a summary of the state of font technologies and an illustration of just how easy it is to use these in stylesheets.

Once you define a font-face using both linking and EOT thusly:

  1. @font-face {
  2.   font-family:"Fenwick";
  3.   src: url(fenwick.eot);
  4. }
  1. @font-face {
  2.   font-family: "Matrix";
  3.   src: url(http://www.westciv.com/CSS3Tests/matrix.ttf) ;
  4. }

You can use a single CSS attribute to reference whichever is supported on the currently browser and gracefully degrade on browsers that don’t support either technology:

  1. p {
  2.   font-family: Fenwick, Matrix, san-serif;
  3. }

Soon-to-be ubiquitous <canvas> (somehow, we’ll get there), faster JavaScript, and custom fonts. Man, this is exciting…

Related Content:

3 Comments »

Comments feed TrackBack URI

I used to use image replacement techniques, but I recently stumbled upon a dynamic text replacement technique that looks very promising. Granted, it’s not as cool as a browser simply supporting custom fonts with no additional scripting, but it does seem to do the trick. I haven’t used it on any live sites yet, but I definitely intend to!

Comment by ChrisHuff — August 27, 2008

>>Soon-to-be ubiquitous (somehow, we’ll get there)…

The final IE8 better have it native, or peasants will riot.

Comment by Nosredna — August 27, 2008

While this solution does work, it is also problematic: the client potentially downloads both font files and then throws away the one it doesn’t understand; this problem of wasted HTTP request is intensified by the fact that font files are often quite big (note that Safari appears to skip downloading font files that end in “.eot”, but MSIE doesn’t skip files that end in “.ttf”). There is a more efficient way to serve these font.

Here, I believe, is an improvement: http://weston.ruter.net/2008/08/27/efficiently-serving-custom-web-fonts/

Comment by westonruter — August 27, 2008

Leave a comment

You must be logged in to post a comment.