[Lab] The Magic of @font-face
Posted on January 25th, 2010
Rendering Fonts People Don't Have?
This may blow your mind, but the font you are currently seeing in your browser is not an image and no, you probably don't have it installed. So how is that possible? Through the fun little CSS property "@font-face" and the awesomeness that is open type face. This font is being pulled off of my server and interpreted in your browser. Don't believe me? Select some text! Go ahead. Do it.
Get Mah Notepad, I have work to do...
That might make you start to wonder why you don't see this sort of thing more commonly on the internet (even ie6 supports @font-face for Boba Fett's sake). Well, here's the short of it: it's a royal pain. Not only do you have to wrestle with licensing, type formats and the like, but pretty much every browser wants some different spec of the typeface - whether it be ttf or eot. You may also notice, depending on your browser, that the text does not render so pretty. Add to that, the page takes a performance hit trying to render it which can make the load 'pop' and the usability behave a bit sluggishly. Firefox will also prompt to allow for fonts that aren't installed but being offered by @font-face which can ruin some of the magic... (stupid giving "control to the user")
Oh, and the big one for me - it doesn't validate.
Still pretty cool, no? Although I suppose it is best that people can't inflict Papyrus on everyone else via the internet as easily...
-Look my name is all hand-write-y! Simon Willems
Participate!
Want to leave a comment? Well, too bad! Actually if you head on over to Twitter and include penguinsroost (no hash necessary) in your message, you can participate in the discussion over at the penguin's roost.