How to use our custom font on our website

Question

How to use a stylish font on my website that works on all browsers

Answer 1

Try sIFR. "Rich Accessible Typography for the Masses".

Edit: Also, check out cufon. (via later posts)

Answer 2

I personally have switched from sIFR to cufon on projects that don't have issues with font EULAs. The about page has a more in depth overview.

Answer 3

Font embedding is becoming viable now. Check out this post from Jonathon Snook

Answer 4

"that works on all browsers"

I don't think there is such a thing as ANYTHING "that works on all browsers".

But your options would include (as stated above) sIFR, though you'd only want to use that for headlines, at most.

More recent browsers can support @font-face css "embedding" of fonts. Some online web services that will allow you to license type for that (either commercial or free fonts) and also make the CSS/JS needed include:

• http://www.kernest.com
• http://www.typekit.com

and there are others as well.

There's also Cufon, which is a javascript based solution.

Answer 5

Depends what font you want to use ... the easiest solution is to use the @font-face method. If you include the microsoft only format(.EOT) it will work in ANY browser.

Font Squirrel has a great collection of free to use commercially, font kits, that include:

• Original TrueType or OpenType Fonts for Firefox 3.5 and Safari
• EOT fonts for Internet Explorer
• SVG fonts for Opera, iPhone & Chrome
• WOFF fonts for Firefox 3.6+
• Demo.html and stylesheet.css so you can get going fast

The @font-face method doesn't require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.

It's totally SEO friendly and scalable.

Answer 6

Do you want to use if for headlines and other 'special' text or for general paragraphs of text? If the former, sIFR or an image representing the text would probably be best. If you want whole paragraphs then you should look into @font-face like DA suggested or see if there's an acceptable web safe font that is close enough to the font you would prefer to use.