Can anyone suggest the best way to have a chosen font display consistently on any browser? Or is this still wishful thinking?
Does it not revert to your default font if there are no fallback fonts specified?
Exactly. I’m still trying to figure out why anybody would voluntarily use Javascript when pure CSS works perfectly.
If the designer has the sense to add the fallback fonts to his stylesheet.
Yes. You get the text displayed a font that you’ve already got installed on your computer
Is there a fall-back for those of us browsing with Javascript disabled?
Use Cufon. Its javascript.
Cufon is fine as far as it goes, but IMO it’s been superseded by the @font-family protocol.
The easiest way is to use a web-safe font
Here is a decent article to help you along:
In the Woods – How to Achieve Cross-Browser @font-face Support
If you must do this, I would advise that you use a font that has a similar web-safe font you can use as a fallback for the unsupported.
Sure - use FontSquirrel. Free, easy as pie, works on all major browsers. I use it on every site I design.
There’s also Google Fonts.
Do you have a rundown of which versions of the major browsers support them?
From FontSquirrel:
TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone
I’d say that just about covers it
This is all accomplished with CSS only - not a single line of Javascript needed.
The late adoption by Firefox is something to examine. We can’t blow off people using 3.5. How do you handle the fall back for users like that?
I’m also going to do some reading about support in the newly emerging android tablet market. I love the idea of using web fonts but I’m not sure its 100% ready for primetime.
I’m pretty sure “3.5+” means “3.5 or greater.” According to Statcounter GlobalStats, the marketshare of FF versions below 3.5 is smaller than IE6 - not even enough to register on the graph.
At any rate, the fallback is exactly the same as with regular fonts - you use a font stack in the CSS. So that tiny sliver of the demographic just sees a less-stylish version of your font.
Now, some have alleged that SVG (which FS uses on IOS) can render very slowly. I haven’t tested this allegation myself. Even if it’s accurate, you could easily modify the CSS to not reference SVG and leave the iPad with regular web-safe fonts.
I wouldn’t worry about Firefox 3.5. Almost all FF users don’t bother to disable the browser’s auto-update, so most everyone using FF has either v6 or something close to it. You know there’s a few diehards out there (“IE 5 kicks butt, why would I update?!?”), but you can’t please every last person in Networld.
That part I’m familiar with, what I was wondering is if you use fonts that have a somewhat similar look to them so a fallback font doesn’t totally break your design.
That was my mistake. Tired eyes on a small screen. I thought it said 3.6+
I should, of course. Whether or not I always actually do is my little secret…
LOL! I’m with you. The reason I ask is because I had a job once where we were told to use a font that their designer specified that had nothing web-safe close to it, so when it failed - it failed really big. The best part is…the client was using Firefox 2 (still) and was the first person to view it without the custom font.
Since then I’ve always been cautious about using custom fonts. I love the idea of using them, though.