Is there any way to fix fonts.com @font-face declarations?

Many popular fonts seem to be available for web use exclusively from http://webfonts.fonts.com/

However, it works in a very strange way. They don't give you the direct font URLs, instead they give you a CSS file that refers to the font files. I think the font URLs in the CSS are probably transient and change over time, to prevent unauthorized use. So you have to use their CSS, you can't directly incorporate the font file URLs (as far as I know).

The CSS in turn is not what I think it should be. Rather than (simplified):

@font-face { 
  font-family: "Foo";
  font-weight: bold;
  src: url("foo-bold-variant.ttf");
}

@font-face {
  font-family: "Foo";
  font-weight: normal;
  src: url("foo-normal-variant.ttf");
}

It is:

@font-face { 
  font-family: "Foo Bold";
  src: url("foo-bold-variant.ttf");
}

@font-face {
  font-family: "Foo Normal";
  src: url("foo-normal-variant.ttf");
}

As a result, you can't do this:

body {
  font-family: "Foo", sans-serif;
}

Instead, anywhere you use font-weight: bold, you have to change it to font-family: "Foo Bold", plus I guess you have to add CSS rules to change the family on things like <strong>. I'm using bold as an example, but the same issue arises for font-style in addition to font-weight.

They explain this as a workaround for an iOS bug ("it's a feature!"): http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone-and-ipad-devices/

But that bug has been fixed in iOS 4.2: http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/

With this setup, unless I'm missing something, I couldn't use any third-party CSS or scripts that try to use font-weight, because fonts.com's approach breaks the font-weight and font-style CSS properties entirely. Instead of using font-weight, you have to make up a custom CSS class for "mybold" or something like that to set the font-family to "Foo Bold." i.e. they break standard CSS. (What am I missing?)

Maybe they'll fix this sometime. But in the meantime, can anyone think of a sane workaround? There's no way to define family "Foo" in terms of their "Foo Bold" etc. @font-face definitions is there? Write some crazy JavaScript to extract the URLs from their CSS on the fly and then define my own @font-face dynamically?

("use a different font with another service" does not count as an answer ;-) yes I have thought of that, but I'm wondering if there's a way to "fix" webfonts.fonts.com by somehow tweaking their CSS with my own CSS rules or JavaScript.)

Solution

I wrote a small Javascript Loader for Fonts.com that allows multiple weights per font-family. It's based on rossi's approach but converted into a re-usable script. Check out the code and usage in this gist.

Basically it loads the CSS from fonts.com, is modified according to the specified settings and is appended to the <head> of your document.

In your JS:

FontsComLoader.load('HelveticaNeueFontsCom', 'https://fast.fonts.net/cssapi/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.css', {
    'W02-55Roma': '400',
    'W02-75Bold': '700'
});

In your CSS:

.helvetica-regular,
.helvetica-bold {
    font-family: 'HelveticaNeueFontsCom', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.helvetica-regular {
    font-weight: 400;
}

.helvetica-bold {
    font-weight: 700;
}