FontCustom / fontcustom

Generate custom icon webfonts from the comfort of the command line.
3.28k stars 422 forks source link

For browser compatibility, add asset-data-url to @font-face definition #200

Open MeanwhileMedia opened 10 years ago

MeanwhileMedia commented 10 years ago

Hello, Due to cross-origin rules, a fontcustom font with the @font-face src pointing to a subdomain path creates inconsistent behavior. It will not work in firefox or IE, but will work fine in other browsers. To increase compatibility without requiring a CORS configuration, I'd like to recommend the following change for the scss-rails template:

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "font";
    src: font-url("font.svg#font") format("svg");
  }
}

Any chance this can be added? Thanks

jtomaszewski commented 10 years ago

+1

But we should be able to turn it on/off from fontcustom's .yml config.