Archive for category CSS

A little about web fonts and @font-face

Hey I know it is not Flash related but I did a little research about web fonts and since I found a lot of bad information out there I thought it would be a good thing to post more good ones.

Ruling out the easy solutions

So basically my goal was to do as Flash does and have a website that uses a font that is not commonly on every computer. I had heard that you could do that now, so I set out on that quest. First thing I checked out was Google Web Fonts but the font that  the designer had chosen was not in there (obviously, why should it ;) ). Same thing with Typekit. I would have felt pretty comfortable using these services, they seem to make it easy and they handle browser compatibility, but I guess it would have been too easy. So I had to learn the hard way.

The hard way is not so hard after all

So my next hint was to investigate the css @font-face thingy (I have no idea how to call this: attribute, selector?). It looked good until you figure out that every browser interprets it differently and when I say every browser I mean Internet Explorer. The thing is it requires a different type format EOT (Embedded Open Type) which I had never heard about and if you don’t use it, it just won’t work. So after searching a bit more on EOT topic I found the solution to all my problems : Font Squirrel. Font Squirrel is basically @font-face made easy. You basically upload the font that you want and it is going to generate all the font files that you will need plus some examples on how to use them. It’s pretty neat. One thing to note is that if you put it in Expert mode you can tell it to just generate TTF and EOT which should be enough and will lower the number of files you need.

Here is what the css for @font-face look like:

@font-face {
    font-family: 'TradeGothicLTStdBdCnNo.20';
    src: url('../font/tradegothicltstd-bdcn20-webfont.eot');
    src: url('../font/tradegothicltstd-bdcn20-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/tradegothicltstd-bdcn20-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

And here is how you use it somewhere else:

.pageDescription{font-family: 'TradeGothicLTStdBdCnNo.20', sans-serif;}

Lastly, if you are going to use that font on the web, you will need the rights to do so. Some fonts are rights free but I guess most fonts aren’t, you’ll need to find a site where you can buy the rights to use them online.


				

, , , , , , , , ,

No Comments