@font-face

Posted: January 17th, 2011 | 1 Comment »

@font-face is a css rule that gives designers and developers more freedom when it comes to typography on a website. While there have been advances in this area of design over the past few years with replacement methods such as cufón and sIFR, and other JavaScript and Flash add ons, @font-face is a much simpler way to use a non-websafe font.

While this method has been around for many years, it wasn’t until recently that it became supported by the majority or major browsers in one way or another. It works by having the font stored within the websites directory and locating it through the CSS, rather than the user having to have the font installed on their computer. So even if a visitor doesn’t have the font installed they will still see the desired font, provided there is support for the font format within the browser they are viewing it on.

For information on browser compatibility & support:
http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support

Using @font-face

It is quite simple to use this, however as you would expect Internet Explorer doesn’t play nice, so while other browser are happy to use a true type font (ttf) IE requires an Embedded OpenType font type (EOT). There are many sites that offer online conversions of a font to this format, I personally use Font Squirrels @fontface Generator

Once you have the ETO and a file for other browsers copy them somewhere in your sites directory and add the following near the top of your css file:

 @font-face {
  font-family: 'fontname';
  src: url(fontname.eot);
  src: local(' fontname Regular'), url(fontname.ttf) format('truetype');
}

What the above does is first locate the .eot file for IE and then uses src:local which IE doesn’t understand to find the other font file for other browsers. There is a slight problem with this method, in that using src:local will mean that it will look in the users directory for the font, so it is best to give the font a slightly different name so that it won’t find a font called that on the visitors computer.

To style an element with the new font all you need to do is add the name that was given as the font-family within the @font-face, for example:

 h1 { font-family: fontname, Helvetica, Arial, sans-serif; }

Like with any fonts used (including websafe ones) it is always best to include others as a fall back, so that if a browser doesn’t support the font it will still have some alternatives to use and not have to rely on the browser defaults.

As for the HTML, as the styling is all done through the css, the element just needed to be written how it would be normally:

<h1> Main Heading Here </h1>

The legal stuff

Always make sure the font you want to use has a Web-font licence, you can check this on the site that you get your font from, or if it is one that you already have on your computer do a quick search to make sure you have the permission required to use the font on a website.

One
Comment

  • Morgan
    January 19, 2011 | Permalink |

    Valuable info. Lucky me I found your site by accident.

Have Your Say

Your email is never shared. Required fields are marked *
To add code to a comment use this [code] your code here [/code]