Fonts & the Web

So our recent client wanted us to use a non-websafe font called Bitstream Vera Serif.  They knew it wasn’t websafe, but they wanted it anyway.  Moreover, they suggested we make the titles that it was listed under to be images.  Hmm… right?

My boss didn’t like it - it’s not very practical and quite troublesome.  He suggested we use font stacks, but I was iffy on it. It’s an alternative, but my other boss is more in line with making it look exactly as the client suggests instead of compromising.

Therefore, after a bit of searching - I went with @font-face.

Font-face makes it so you don’t have to worry too much about what’s “websafe” - with font-face you have more freedom in styling your fonts the way you want it to.  So I was relieved with this.

All you need with font-face is a browser-support copy of the font you wish to use, and then style it in the css.

Browser support makes you a bit hesitant… kind of.  Most of the browsers support .ttf with the exception of internet explorer (surprise, surprise…).

Here’s a simple breakdown:

IE supports .eot

Chrome, Firefox, Safari, and Opera support .ttf

Chrome and iPhone support .svg

Now to call, it in your css, you simply need to type

@font-face {

font-family: nameoffont;

src: url('../fonts/nameoffont.ttf');


Simple, right?