Home » Webfonts : Expand your typography stacks

Categorised in: Tutorial

I’m going here to avoid Google WebFonts and talk more about the fonts that you buy and that are more and more provided with a “webfont” package.

The package is generally a directory containing several files. Even though all major browsers support Webfonts they all don’t do it the same way! That is why, usually, you should get these files included for each font

  • .SVG
  • .TTF
  • .WOFF
  • .EOT

Your Webfonts file must be reachable by your website. You might upload them there.

1.Include the webfont in the CSS

This is done using the @font-face command.

@font-face{ font-family: 'MyWebFont';
src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg'); }

Then link the stylesheet to your html file.

Now use the Webfont

To use the webfont you will have to use the font-family: command to any of the element you whish.

p { font-family: 'WebFont', Arial, sans-serif; }

And that’s it ! Short, plain and simple !


Bear in mind that


  • IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
  • A service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE.
  • IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to “image/svg+xml” in the server settings.
  • Older browser won’t render the webfonts: just upgrade now !


Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.