Web fonts have been around for a while, since 1998, when CSS2 created a way to link to fonts from style sheets. Unfortunately the big browsers back then did not include support for the most widely used format, TrueType.
Web Fonts are back. Thanks to some of CSS3 architecture and a declaration called @font-face.
The @font-face allows you to direct your stylesheet to a particular font via url, once done, simply declare the font use as you would with Arial or Verdana. Let’s take a look at the code.
@font-face{
font-family: "Kimberly";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype")h1 { font-family: "Kimberley", sans-serif }
The @font-face declaration is easy to understand, as the font is requested, the file is fetched from the specified URL, this syntax is described in the CSS2 specification.
To avoid long lists of @font-face declarations in your style sheet, you can simply hide them by using the @import, see this example.
@import url(http://www.princexml.com/fonts/larabie/index.css) all;
h1 { font-family: "Kimberley", sans-serif; }
The TrueType fonts used are designed by Ray Larabie and are provided free for use on the web.
Posted On: Wednesday, August 27th, 2008 @ 5:58 pm by Ian Tearle
If you would like to discuss anything about this post, please be polite and add your comments below.
No HTML is allowed. All links, and new lines will be automagically converted to HTML for you.
Notice to spammers, all links will be sanitized with rel="nofollow".
If you would like to discuss anything about your next project please drop me a line.
Projects start at £99.00 per month
We normally book 2–3 months in advance.
No matter how small your project is, or if the prices above scare you, please do get in touch, I shall always listen and will advise freely alternative ideas or solutions. If you are a charity, let's talk!