Towards Using Custom Fonts
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:
CSS:
-
@font-face {
-
font-family:“Fenwick”;
-
src: url(fenwick.eot);
-
}
CSS:
-
@font-face {
-
font-family: “Matrix”;
-
src: url(http://www.westciv.com/CSS3Tests/matrix.ttf) ;
-
}
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:
CSS:
-
p {
-
font-family: Fenwick, Matrix, san-serif;
-
}
Soon-to-be ubiquitous <canvas> (somehow, we’ll get there), faster JavaScript, and custom fonts. Man, this is exciting…
