Adding fonts to HTML/CSS code for website users (cross-browser)

Question

Say I have several .otf and .dfont font files that are used in PSD for web site design. Now I need to add those fonts into the HTML/CSS code. I know @font feature of CSS3 which does that. But I am sure that it would not work for older browsers? So what is the cross browser way of doing that?

Answer 1

Firstly, websites need not look alike in all the browsers ( http://dowebsitesneedtolookexactlythesameineverybrowser.com/ ). It is perfectly fine to not display these fonts in the older browsers. Just provide a fallback as @ThiefMaster mentioned.

In case , you insist on using the same fonts even for older browsers, you might have to rely on Cufon ( http://cufon.shoqolate.com ) for cross browser compatibility. Use a feature detection (using Modernizr ) and conditionally load the Cufon library. Be warned that using Cufon on body text would make the page load slower.

PS: All IE versions support web font embedding.

Answer 2

You can use http://www.fontsquirrel.com/fontface/generator to create a most-compatible CSS containing the various @font-face declarations.

Obviously there will be some old browsers not supporting it - for those you should specify a regular font when using the custom font, eg like this:

p { font-family: "your font", sans-serif; }

Answer 3

I'm using FontSquirrel's @font-face kit generator, and it works pretty well in my opinion.

Check it out at http://www.fontsquirrel.com/fontface/generator

Shai

Answer 4

FontSquirrel didn't work for me. http://transfonter.org/ , on the other hand, was perfect in order to transform DFONT to TTF.