title: Is there any way to fix fonts.com @font-face declarations?
body: <p>Many popular fonts seem to be available for web use exclusively from <a href="http://webfonts.fonts.com/">http://webfonts.fonts.com/</a></p>
  
  <p>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).</p>
  
  <p>The CSS in turn is not what I think it should be. Rather than (simplified):</p>
  
  <pre><code>@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");
  }
  </code></pre>
  
  <p>It is:</p>
  
  <pre><code>@font-face { 
    font-family: "Foo Bold";
    src: url("foo-bold-variant.ttf");
  }
  
  @font-face {
    font-family: "Foo Normal";
    src: url("foo-normal-variant.ttf");
  }
  </code></pre>
  
  <p>As a result, you can't do this:</p>
  
  <pre><code>body {
    font-family: "Foo", sans-serif;
  }
  </code></pre>
  
  <p>Instead, anywhere you use <code>font-weight: bold</code>, you have to change it to <code>font-family: "Foo Bold"</code>, plus I guess you have to add CSS rules to change the family on things like <code>&lt;strong&gt;</code>. I'm using bold as an example, but the same issue arises for <code>font-style</code> in addition to <code>font-weight</code>.</p>
  
  <p>They explain this as a workaround for an iOS bug ("it's a feature!"): <a href="http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone-and-ipad-devices/">http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone-and-ipad-devices/</a></p>
  
  <p>But that bug has been fixed in iOS 4.2:
  <a href="http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/">http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/</a></p>
  
  <p>With this setup, unless I'm missing something, I couldn't use any third-party CSS or scripts that try to use <code>font-weight</code>, because fonts.com's approach breaks the <code>font-weight</code> and <code>font-style</code> 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?)</p>
  
  <p>Maybe they'll fix this sometime. But in the meantime, <strong>can anyone think of a sane workaround?</strong> There's no way to define family "Foo" in terms of their "Foo Bold" etc. <code>@font-face</code> 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?</p>
  
  <p>("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.)</p>