How to use our custom font on our website

Question

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

Jennings

All you people downvoting genuine questions without explanation are really undermining the site. – Lougheed

Well, it's a genuine question but really, really short. I can understand people downvoting this. – Schaumberger

The title needs to be rewritten as well. "How to use custom fonts on a web page?" would be a better question title. – Ambit

Rajasekar, did you find a solution that matched your question below? If so, please kindly accept an answer :) – Seidler

Answer 1

"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.

Ambit

If all you're using it for is headlines, I'd just use images :) – Umpire

@Umpire if we're talking a couple of headlines, sure. A decent image with proper alt attributes wrapped in proper markup would be fine. However if we're talking many, many headlines, you're running into performance (multiple image requests on the server) and maintenance (someone having to create them or a process running on the server to create them) – Ambit

Answer 2

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

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

Seidler

Answer 3

The only worthwile solution is sIFR.

Schaumberger

Answer 4

You really should check out the @font-face CSS3 rule. Here's a converter to make it work in IE. Paul Irish has a great writeup on how to use the rule here.

[EDIT] Just found a handy generator, too: http://www.fontsquirrel.com/fontface/generator

Beller

Answer 5

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

Jasisa

I just implemented Jonathan Snook's step-by-step on a website and I was pleased with the result. The process was laborious. – Middlebreaker

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.

Versicle

I want to use it for paragraphs – Jennings

Whether SIFR is seo friendly?? – Jennings

sIFR is SEO friendly, as the text is still there on the page. However, you really don't want to use it for entire paragraphs of text. That's overkill and can introduce some usability/accessibility issues. Use @font-face or Cufon if you want large chunks of text to use a specific font. – Ambit

I believe sIFR is slow for large bodies of text. – Versicle

Answer 7

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.

Parham

Answer 8

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.

Pullet