Answer by Chris Krycho for Is there any way to fix fonts.com @font-face declarations?

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.