Fonts….coming to a site near you

Just thought i would make a note to say Fonts are finally here….no more putting up with arial, being funky with verdana or stuck with times new roman…. as Firefox 3.1 continues to be flooded with features we have been waiting an age for, P0RN mode, faster javascript, html 5.
We are finally getting the ability to use what ever font we wish, as part of our website designs, as long as its a public font of course.

Firefox 3.1 allows us to use the CSS3 rule @font-face, allowing us to specify a font not necessarily installed on a visitors system. The rule alerts the visiting browser a non-standard font is required and is given a location it can download the font into the temp files to display the website as intended.

Syntax

@font-face {
  font-family: <a-remote-font-name>;
  src: <uri>;
}

Example

  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>

More details on this can be found over at the Mozilla Dev site , they have also publised a list for developers with all the features being added to 3.1

Tags: @font-face, 3.1, css3, firefox, fonts

This entry was posted by Gavin on Wednesday, December 31st, 2008 at 11:44 am and is filed under CSS, Website Design.
You can follow any responses to this entry through the RSS 2.0 feed.