Web fonts, Typefaces and more

Font Squirrel @FONT-FACE GENERATOR

Over the last few projects I have been using a method of embedding non web fonts via CSS, using "@font-face". This opens up so many design possibility, by not being limited to the same handful of "web safe" fonts.

For a web designer the web safe list is as tierd and over used as it is short, but features the interesting "Screen" typefaces: Tahoma, Trebuchet, Verdana. These screen typefaces are designed to be read on screen and fit into the pixels make up of the screen, rendering nicely at body text size, enabling easy on the eye reading. I favour using such a typeface for body text for these characteristics.

Web safe fonts: http://www.w3schools.com/css/css_websafe_fonts.asp

When it comes to heading text I now have the option of selecting a typeface as if I was using InDesign!

In the first instance I used the following CSS and combination of OTF open type and EOT font file formats. This worked very well.

Many thanks to ttf2eot and the following for enabling the creation of EOT file from TTF format:

The CSS

@font-face {
	font-family:"Font Name";
	src: url("font-file-name.eot");
	src: local(Calvert), url('font-file-name.otf') format('opentype');
	}

This method works well, but I have since been made aware of a more cross browser compatible method, thanks to Quentin of: http://www.createhosting.co.nz

The NEW CSS

@font-face {
    font-family: 'Font Name';
    src: url('font-file-name.eot');
    src: url('font-file-name.eot?iefix') format('eot'),
         url('font-file-name.woff') format('woff'),
         url('font-file-name.ttf') format('truetype'),
         url('font-file-name.svg#webfontiKDmuPjY') format('svg');
    font-weight: normal;
    font-style: normal;
}

Yes, that is a whole heap of different font formats in use, creating those will make your head spin. That would be the case if it wasn't for Font Squirrel and their generator:

CSS code / font file generator: http://www.fontsquirrel.com/fontface/generator

So it seems using the typeface of choice has just been made a whole heap easier. I say I will be using the Donate button on the Generator page in the future!

I would like to knowledge http://www.fontspring.com for the hard work they put into the CSS markup and the cross browser compatibility of it all... Read More

To see the solution in action you need look no further than the headings and navigation bar of this website, Font Squirrel also creates a very nice sample set of pages. For the sample / demo page of the typeface used in this site click here