Is there any way to fix fonts.com @font-face declarations?
https://stackoverflow.com/questions/5824925
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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;
}
OTHER TIPS
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.
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
- 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.
- I use
hashhere 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.
A year passed, but I still don't see desired functionality in webfonts.fonts.com, so I encountered the same problems as "Havoc P". It looks quite frustrating. Fortunately, fonts that I needed are also hosted on "webtype.com", that allows to use standard "style linking" approach and also allows to give bold/italic different family names if you want. So I just gone with it.
i did this: (didn't bother to clean up the code, this could be way better / more universal, but i'll post it anyway, you'll get the idea) it uses document.stylesheets for internet explorer because i didn't get cross domain css load to work with it, and the $.get ajax load of the css for other browsers. didn't check in ie below 8, but i think it even works there. there is some flicker in chrome on windows (vista) but i think a combination of this and google webfont loader would do the trick.
<link rel="stylesheet" href="//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css" />
<script>
var data = "";
try
{
data = document.styleSheets[document.styleSheets.length - 1].cssText;
data = data.replace(/url\(/g, 'url(//fast.fonts.net');
data = data.replace(/font-family: Geom Slab 703 W01 Light;/g, 'font-family:"GeomSlab";font-weight:lighter;');
data = data.replace(/font-family: GeomSlab703W01-LightIta;/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
data = data.replace(/font-family: GeomSlab703W01-Medium;/g, 'font-family:"GeomSlab";font-weight:normal;');
data = data.replace(/font-family: GeomSlab703W01-MediumIt;/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
data = data.replace(/font-family: Geom Slab 703 W01 Bold;/g, 'font-family:"GeomSlab";font-weight:bold;');
data = data.replace(/font-family: GeomSlab703W01-BoldItal;/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
document.styleSheets[document.styleSheets.length - 1].cssText = data;
}
catch (e)
{
}
$.get(location.protocol + '//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css', function(data) {
data = data.replace(/url\("/g, 'url("//fast.fonts.net');
data = data.replace(/import url\(/, 'import url(//fast.fonts.net');
data = data.replace(/font-family:"Geom Slab 703 W01 Light";/g, 'font-family:"GeomSlab";font-weight:lighter;');
data = data.replace(/font-family:"GeomSlab703W01-LightIta";/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
data = data.replace(/font-family:"GeomSlab703W01-Medium";/g, 'font-family:"GeomSlab";font-weight:normal;');
data = data.replace(/font-family:"GeomSlab703W01-MediumIt";/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
data = data.replace(/font-family:"Geom Slab 703 W01 Bold";/g, 'font-family:"GeomSlab";font-weight:bold;');
data = data.replace(/font-family:"GeomSlab703W01-BoldItal";/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
var s = $('<style type="text/css" />').appendTo('head');
s.html(data);
});
</script>
ok, so i don't need more than this quick hack for my current project, but if anyone codes a cleaned-up / optimized version i'd be happy to hear about it.
Fonts.com now has a "Family Grouping" option to solve this problem. I didn't investigate to thoroughly but it looks like it was released around Sep. 2013.
While I realize it is a bit more work, there is an alternative method that should allow the end result you're aiming for: Google's WebFont Loader API (with our service delivering fonts).
Essentially, Google has built an AJAX API that you can use with our service. Advantages include the ability to detect the status of font loads–the API dynamically styles the HTML tag of the page with different classes based on whether a font fails to load (inactive), is currently being loaded (loading), or has successfully loaded (active). You can then use some clever CSS rules to take advantage of these classes.
More information can be found on our blog post and Google's documentation.
Robertc gave the best answer as a comment to the original question. Fonts.com is using the most accepted version of @font-face (at this time), which does not utilize the font-weight declaration due to spotty support cross-browser.
