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

Question

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.)

Answer 1

Sadly this is still an issue almost two years later and Fonts.com has no immediate plans to change the way they declare fonts (asked them on Twitter).

However if you use a CSS compiler (eg. SASS) you can solve this issue pretty easily with nested styles... the only downside is it's more code than using a simple font-weight declaration.

Tossing this code here in case anyone stumbles across this old thread like I did!

h1 {
    font-family: "PMNCaeciliaW01-75Bold", Georgia, Times, serif;

    b, strong {
        font-family: "PMNCaeciliaW01-85Heavy", Georgia, Times, serif;
    }
    i, em {
        font-family: "PMNCaeciliaW01-76BoldIt", Georgia, Times, serif;
    }
    b i, strong i,
    i b, i strong
    b em, strong em,
    em b, em strong {
        font-family: "PMNCaeciliaW01-86HeavyI", Georgia, Times, serif;
    }
}

It doesn't generate the prettiest CSS in the world, but it works.

Answer 2

Update 2014/01/16: Fonts.com now supports standard font face embeds. The following still works as it should, but is largely obviated by first-party support.

---

First, note that Fonts.com now asserts that family groupings are "in the works". In the meantime, however, one can actually do normal @font-face family embeds using the kits Fonts.com supplies.[1]

Assume that the font face declaration they give you is something like this, where I have substituted hash for the name of the font file in each case:[2]

@font-face{
    font-family:"Minion W01 It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion W01 Regular";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

Then to create a font face family with a nice name, you can just tweak those declarations as follows:

@font-face{
    font-family:"Minion";
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: normal;
    font-style: normal;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

That's it; it's that simple. I've already tested this on one of my own sites, and it works as expected. Obviously, for older browser that don't support it, you will have problems (problems which Typekit addresses in other ways). If you're using fonts.com, though, this should take care of it for you.

---

Footnotes

1. Note: this particular approach is only guaranteed to work for the self-hosted option, not for the version that Fonts.com hosts. I suspect it might work for the version they host, but I have not tested it and do not plan to in the near future; if someone wants to and lets me know in a comment, I'll happily update the answer to reflect that.
2. I use hash here because the file names look like they're being generated by running the original file name through a hash generator. Since this is a self-hosted kit, those names aren't going to change and this will therefore continue to work. Thanks to commenter vieron for pointing out that this needed clarification.