iantearle.com

CSS Web Fonts

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


0 Comments

There are no comments on this entry. You should add one below.

Leave a comment

Be kind

If you would like to discuss anything about this post, please be polite and add your comments below.


 
 

Additionally

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".


Contact Me

Get In Touch

If you would like to discuss anything about your next project please drop me a line.


 

Prices

Startup Websites: £19.00 per month
Commerse Websites: £39.00 per month
Native Apps: £2000

Additionally

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!


Find Me On