iefix, weird fragments, and weird query strings in font-face

Question

I'm trying to figure out how to put together font-face declaration for an icon font. I'm working on and iterating some code I got from someone else. The bourbon input and CSS output are below.

Is this correct? What's the deal with these funky url fragments and queries? I've tried googling and haven't been able to come up with much.

Bourbon input

@include font-face(companyicons, "companyicons.eot?",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.eot?#iefix",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.woff",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.ttf",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.svg#medstroicons",
  $weight: "normal", $style: "normal", $asset-pipeline: true);

CSS Output

@font-face {
  font-family: companyicons;
  font-weight: "normal";
  font-style: "normal";
  src: url(/assets/companyicons.eot?.eot);
  src: url(/assets/companyicons.eot?.eot?#iefix) format("embedded-opentype"), url(/assets/companyicons.eot?.woff) format("woff"), url(/assets/companyicons.eot?.ttf) format("truetype"), url(/assets/companyicons.eot?.svg#companyicons) format("svg"); }

@font-face {
  font-family: companyicons;
  font-weight: "normal";
  font-style: "normal";
  src: url(/assets/companyicons.eot?#iefix.eot);
  src: url(/assets/companyicons.eot?#iefix.eot?#iefix) format("embedded-opentype"), url(/assets/companyicons.eot?#iefix.woff) format("woff"), url(/assets/companyicons.eot?#iefix.ttf) format("truetype"), url(/assets/companyicons.eot?#iefix.svg#companyicons) format("svg"); }

@font-face {
  font-family: companyicons;
  font-weight: "normal";
  font-style: "normal";
  src: url(/fonts/companyicons.woff.eot);
  src: url(/fonts/companyicons.woff.eot?#iefix) format("embedded-opentype"), url(/fonts/companyicons.woff.woff) format("woff"), url(/fonts/companyicons.woff.ttf) format("truetype"), url(/fonts/companyicons.woff.svg#companyicons) format("svg"); }

@font-face {
  font-family: companyicons;
  font-weight: "normal";
  font-style: "normal";
  src: url(/fonts/companyicons.ttf.eot);
  src: url(/fonts/companyicons.ttf.eot?#iefix) format("embedded-opentype"), url(/fonts/companyicons.ttf.woff) format("woff"), url(/fonts/companyicons.ttf.ttf) format("truetype"), url(/fonts/companyicons.ttf.svg#companyicons) format("svg"); }

@font-face {
  font-family: companyicons;
  font-weight: "normal";
  font-style: "normal";
  src: url(/assets/companyicons.svg#companyicons.eot);
  src: url(/assets/companyicons.svg#companyicons.eot?#iefix) format("embedded-opentype"), url(/assets/companyicons.svg#companyicons.woff) format("woff"), url(/assets/companyicons.svg#companyicons.ttf) format("truetype"), url(/assets/companyicons.svg#companyicons.svg#companyicons) format("svg"); }

Answer 1

Try this:

Bourbon

@include font-face("companyicons", "companyicons",
  $weight: normal, $style: normal, $asset-pipeline: true);

Should produce:

CSS

@font-face {
  font-family: "companyicons";
  font-weight: normal;
  font-style: normal;
  src: url(/assets/companyicons.eot);
  src: url(/assets/companyicons.eot?#iefix) format("embedded-opentype"), / 
    url(/assets/companyicons.woff) format("woff"), /
    url(/assets/companyicons.ttf) format("truetype"), /
    url(/assets/companyicons.svg#companyicons) format("svg"); 
}

Answer 2

The best way is to just test them. But the things that look wrong to me are:

1. All the fonts seem to have the same name "companyicons", so they'll overwrite each other.
2. The URLs should be quoted.
3. The file names are suspicious "companyicons.woff.eot".
4. Depending on how far back you want browser support for, I only use .woff. It works on 90% and growing of today's browsers.
5. I think I remember some browser requiring the format extension for every src tag.