How to use a stylish font on my website that works on all browsers
+6
A:
"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
2009-11-11 22:29:54
If all you're using it for is headlines, I'd just use images :)
Brian
2009-11-11 22:30:46
@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
2009-11-11 22:32:17
A:
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
2009-11-11 22:35:52
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
2009-11-11 23:18:32
+1
A:
Font embedding is becoming viable now. Check out this post from Jonathon Snook
rojoca
2009-11-11 22:46:22
I just implemented Jonathan Snook's step-by-step on a website and I was pleased with the result. The process was laborious.
jessegavin
2009-11-12 16:59:25
A:
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.
cballou
2009-11-11 23:12:39
+3
A:
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
2009-11-12 00:23:20
A:
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
2009-11-13 16:47:35