Web Fonts for All with WOFF

Web Fonts for All with WOFF

4 Oct

Author : Rocío Alvarado, Categories : Web Site Development

Watch out Tahoma, Verdana and all you outdated "web safe fonts", the web is getting beautified with more fonts. The latest font format, WOFF File Format 1.0, is slick and potentially the best thing that ever happened to online typography. In a not too distant future, we will all be able to enjoy the internet with any font imaginable without impeding on the accessibility of the content. No more Javascript snippets, no more Flash...OMG I can hardly wait!

 

Typo graphies web

Here's the CSS syntax:

@font-face {

  font-family: <a-remote-font-name>;

  src: <source> [,<source>]*;

  [font-weight: <weight>];

  [font-style: <style>];

}

And here's an example from the Web FontFont user guide:

/* first for Internet Explorer */

@font-face {

font-family: MyKievit;

src: url(/fonts/KievitWebPro-Medium.eot);

}

/* then for Firefox */

@font-face {

font-family: MyKievit;

src: url(/fonts/KievitWebPro-Medium.woff) format('woff');

}

So why isn't this feature available on all websites? Simple, the syntax is browser dependant. The browser must be able to detect and extract the font from your CSS code. As of now @font-face is supported by Firefox 3.6 and up, Internet Explorer 9, Google Chrome 5.0 and up. Safari will jump on the wagon soon. The W3C has made a WOFF proposal that will eventually become an official W3C recommendation, which means that more browsers will jump on board too. Check out the current compatibility tables.

See some examples:

Find out more:

Tags : font, w3c, web, woff

Add new comment