I started to design a header menu bar and didn’t want to use an image as the Application title home link, but I didn’t want some old boring font either. Enter @Font-Face a struggling standard that looks like it is finally going to grab hold in css3. @Font-Face basically lets you tell the browser where to go and get the font, instead of the normal way of being limited to the fonts that are on the browsers device.
There is a huge collection of web fonts at: Font Squirell
Font Squirell lets you download fonts in four different formats….of course one format cant’ work for the entire web /sigh. I only used the WOFF type on my sample site so if you don’t see the correct fonts go upgrade browser, because the WOFF standard is the latest and greatest…or so “they” say.
TTF – Works in most browsers except IE and iPhone.
EOT – IE only.
WOFF – Compressed, emerging standard.
SVG – iPhone/iPad.
Google took this concept one step further and created an API that allows you to dynamically specify and download web fonts and it detects the best file type for the browser your using. Google Font API
I noticed a lot of pixelation of the fonts so I added a css text shadow that seemed to make it better. At least on my monitor. Tell me what you think:
If I zoom in on it I don’t see a difference…so not sure if my eyes are messing with me but I think it looks better.
Of course there was one last hick up on the deployment. The web server wasn’t set up to handle the mime type of .woff. so none of the web fonts would load. A simple web.config file addition fixed that and you can see it all live here:
http://www.jameseisenhauer.com/smpl/fontface/
That’s it for now I think the wife is finally waking up. Things to do when your dog wakes you up at 4:30am on a Sunday. Play with @Font-Face and watch Motorcycle Grand Prix racing live from Spain via the web.
September 18th, 2011 → 7:48 am
0