Webfonts

Introduction

I’ve recently been working on some new HTML5 projects using Twitter Bootstrap and needed to escape the Helvetica norm. Hopefully this post will prvide a useful introduction to creating Webfonts.

Webfonts

A webfont is a specially tuned font for use on websites using the CSS @font-face declaration, basically a font in a desktop format is exported to formats which are compatible for all browsers.

Paul Irish privides a detailed explanation here: Bulletproof @font-face Syntax. 

There are a variety of free fonts which can be used, Fonts Squirrel provide a service which creates font face declaration which can be added to your CSS.

For instance Museo-Slab 500 can be downloaded from My Fonts, which also creates a ‘kit’, ( although rather annoyingly it creates the CSS with encoded names ).

Back to Fonts Squirrel’s Webfont-Generator, add a font from it’s collection in .tff format and a set of fonts in woff, and true type formats and are created, and the following CSS is generated. 

@font-face {
 font-family: 'destroyregular';
 src: url('destroy-webfont.eot');
 src: url('destroy-webfont.eot?#iefix') format('embedded-opentype'),
 url('destroy-webfont.woff') format('woff'),
 url('destroy-webfont.ttf') format('truetype'),
 url('destroy-webfont.svg#destroyregular') format('svg');
 font-weight: normal;
 font-style: normal;

}

Add the font set to the source and your site can webfonts!

Conclusion

Hopefully at least, I’ve added a future reference for adding web fonts to help create better websites.