CSS @font-face… Custom Web FontsPosted on By Addam Driver Sunday, October 2, 2011
SO! ever wanted to put a custom webfont on you’re web page? Well… you’re in luck with a simple css tag called @font-face. This tag isn’t new. It even supported in IE 5. I don’t think it was wildly adopted because either people didn’t know it existed or fonts were too heavy for the connections at the time. I think it’s a little of both.
Anyway! Let’s get down to the code. Here is a code example:
From this code you can use the standard “font-family: UbuntuMono;” in your CSS and IF the user doesn’t have the font, it will download it to their computer temporarily for your’re web page. Pretty cool eh?
You can have several of these on your page. I don’t recommend having many of these because the fonts are pretty heavy. Most people wouldn’t ever know it on a high speed connection but either way, it is heavy.
There is a company named TypeKit who was recently acquired by Adobe ©. They have an AMAZING way of helping you integrate almost any font you desire and you don’t have to worry about any licensing issues or anything like that. They also push fonts that are light in weight.
So if you choose to use Typekit or not. You can use you’re own font using YOUR code so you can optimize it as you see fit.
Some things to note:
- The font must reside on the root of the server. No redirects…
- Different browsers can utilize different font types. Some are lighter than others and 1 isn’t necessarily supported by all browsers
Have fun and create your own fonts! W00T!!