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.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s