6

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

Mike Atlas
  • 8,193
  • 4
  • 46
  • 62
Rajasekar
  • 18,392
  • 34
  • 106
  • 137
  • 7
    All you people downvoting genuine questions without explanation are really undermining the site. – Gabriel Magana Nov 11 '09 at 22:28
  • 1
    Well, it's a genuine question but really, really short. I can understand people downvoting this. – Pekka Nov 11 '09 at 22:49
  • The title needs to be rewritten as well. "How to use custom fonts on a web page?" would be a better question title. – DA. Nov 11 '09 at 23:19
  • Rajasekar, did you find a solution that matched your question below? If so, please kindly accept an answer :) – Mike Atlas Nov 19 '09 at 18:45

8 Answers8

6

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

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

Community
  • 1
  • 1
Mike Atlas
  • 8,193
  • 4
  • 46
  • 62
6

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

and there are others as well.

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

DA.
  • 39,848
  • 49
  • 150
  • 213
  • If all you're using it for is headlines, I'd just use images :) – Brian Nov 11 '09 at 22:30
  • 1
    @Brian 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) – DA. Nov 11 '09 at 22:32
3

The only worthwile solution is sIFR.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
3

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

NickAldwin
  • 11,584
  • 12
  • 52
  • 67
1

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

rojoca
  • 11,040
  • 4
  • 45
  • 46
  • I just implemented Jonathan Snook's step-by-step on a website and I was pleased with the result. The process was laborious. – jessegavin Nov 12 '09 at 16:59
0

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.

pr1001
  • 21,727
  • 17
  • 79
  • 125
  • I want to use it for paragraphs – Rajasekar Nov 11 '09 at 22:42
  • Whether SIFR is seo friendly?? – Rajasekar Nov 11 '09 at 22:50
  • 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. – DA. Nov 11 '09 at 23:18
  • I believe sIFR is slow for large bodies of text. – pr1001 Nov 12 '09 at 01:00
0

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.

Corey Ballou
  • 42,389
  • 8
  • 62
  • 75
0

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.

Jonny Haynes
  • 3,146
  • 1
  • 27
  • 41