Cufon for fonts...anything that is more 100% reliable?

raindog308

I use Cufon to display non-system/non-standard fonts. Typically no more than one or two per page.

Cufon works...about 99% of the time. Periodically I load a page and see ugly bitmaps. Then later it works fine. No code change underneath - I've also seen the same thing at other sites (that I don't design). Big companies, too.

From some research, it sounds like this is browser bugs. I'm guessing something doesn't work correctly in the javascript rendering and so you get the fall-back or default fonts.

Again, it's not common...but I worry about the impression it makes when a new visitor comes and sees an ugly site.

Is there an alternative to Cufon that is more 100%? Other than limiting myself to the global fonts only...

jh

Include the font file

DStrout

OK, so literally all I know about Cufon is what I could gather from the result previews for a corresponding Google search. And I don't know much about fonts in general. But still, have you considered the Google font library? I have worked with it several times, and it works well. Older browsers don't support it, but people who are interested in VPSes probably have up-to-date browsers. And you can always specify alternate fonts in your CSS.

raindog308

@jhadley - I don't think the font particularly matters. It's a free font from dafont, and run through Cufon gives me a .js that is 32366 bytes.

jh

What I meant was, instead of using JS, do this:

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Maven Pro Regular'), local('MavenProRegular'), url(http://themes.googleusercontent.com/static/fonts/mavenpro/v4/MG9KbUZFchDs94Tbv9U-pbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

If you need to convert the font file, there's an online tool here: http://www.font2web.com/

Abdussamad

cufon is obsolete. Use @font-face.

raindog308

But Google doesn't have the font I want, alas. It's a free font (don't need to pay to license) but not in Google's library.

jh

@raindog308 said: But Google doesn't have the font I want, alas. It's a free font (don't need to pay to license) but not in Google's library.

So change the URL from google to your own - that was just a CSS example

Sunshine

@jhadley said: Include the font file

This.

You can easily add a font from here (I prefer the "Standard" stylesheet approach):
http://www.google.com/webfonts

If you take a look at the stylesheet that Google generates, it does a bit of browser sniffing and return a slightly different sheet for IE / Firefox / whatever. Well, thats what they were doing the last time I checked. I'm guessing they've worked out the finer details for each browser.

If you want to do it all yourself or just need to use a special font, then you can copy what Google does, but host your own font files (eot / ttf / woff) on your own webserver. And instead of browser sniffing, use conditional stylesheet includes for IE / other browsers.

Or just go with the font2web approach - but I havn't tried that. It probably works great too.

raindog308

Ahhh...I see. OK, I will try that. Thanks @jhadley and @Sunshine !

mojeda

Maybe check out http://fortawesome.github.com/Font-Awesome/ ?