Font for Web Pages

For years their was a set number of fonts you could use for web design and that's it. So if you wanted anything else typographically speaking it had to be a jpeg for a gif or a png.

But NOT ANY MORE!!!!!

For those not up on the latest web technologies with the release of CSS3 came a Web font functionality. If you have the right font files you can embed the file needed for a computer (or cell phone or tablet or what have you) to output your text in your font right in your website.

But for those who don't want to be buying font files left and right their are several subscription services that host 1000's of fonts for you. As for this site I went with the google service as it is free and this site is mostly for me and as such not getting a crazy amount of traffic.

Implementation is pretty simple, all you have to usually do is call an extra javascript or include to call their api and then the new font becomes something you can write into any CSS sheet using the standard font-family:Whatever-Font-You-Want.

But what about those who don't want to use an external service they want to host it on their system. Well first you need to buy/find a font you want. Get it in a .ttf or .otf format file, also grab a .eot format file if you can for windows ie support. After you got your files you need to use the CSS3 @font-face rule. So basically just add something like this to you style sheets;

@font-face
{
font-family: Whatever-Font-You-Want;
src:
url('Whatever-Font-You-Want.ttf'),
url('Whatever-Font-You-Want.eot') format("opentype"); /* IE */
}

After that you can call your Whatever-Font-You-Want font just like any system font.