Custom fonts using @font face CSS method

In the recent weeks I’ve been playing around with @font face CSS method more, and I’m happy to say the future of website design is looking up. We will no longer be limited to just a handful of web friendly fonts. With cross-browser compatibility the @font face CSS has made it easier to add custom fonts to your websites.

The best commercial-use free fonts I’ve found so far are at Font Squirrel (http://www.fontsquirrel.com/). You can download hundreds of kits already packed with a css style sheet, demo page and all 4 file formats you will need to start making beautiful custom font web pages.

This is an example using a downloaded @Font Face Kit:

Ravenshoe Group

But wait… if you don’t find the font you’re looking for on Font Squirrel try using their @Font Face Generator. By selecting one of your existing .ttf (True Type Fonts) you can generate a @Font Face Kit of your own. Just make sure you own the rights to the font.

Here’s an example using a downloaded @Font Face Generator:

Ravenshoe Group

How does it work?

Start by adding this Bulletproof Syntax to your CSS file. Then when you want to use this font just add the font-family: ‘ChunkFiveRegular; into your font stack the same way you would Arial, Times or Myriad. (ex. font-family: Lobster13Regular, Arial, Times, Myriad, serif;)

Example:

@font-face {
font-family: ‘Lobster13Regular’;
src: url(‘Fonts/Lobster_1.3-webfont.eot’);
src: url(‘Fonts/Lobster_1.3-webfont.eot?iefix’) format(‘eot’),
url(‘Fonts/Lobster_1.3-webfont.woff’) format(‘woff’),
url(‘Fonts/Lobster_1.3-webfont.ttf’) format(‘truetype’),
url(‘Fonts/Lobster_1.3-webfont.svg#webfontLXW01n4B’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

You should be testing your design in at least one of your fallback fonts to ensure that it doesn’t cause your layout to break.

Custom fonts will load quickly making them fully selectable, you can copy and paste them and most importantly they are search engine friendly. The only thing left to do before @font face goes main stream is for Windows to keep up with MAC.

If you look at the fonts closely on a Windows machine you can tell the font isn’t as smooth as it appears on a MAC. Some fonts are more noticeable then others, but the transition has begun and it won’t be long before your website can look as creative as your printed brochure.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Top