New Bulletproof @font-face syntax using Data URIs in Compass

Question

I am using compass' font-face mixin along with the inline-font-files and font-files in order to create something along the lines of the The New Bulletproof @Font-Face Syntax using Data URIs for woff, ttf and otf files.

I use relative URLs for eot (due to lack of IE support for data URI) and for svg files, (due to the #FontName hash I guess). The eot file poses no problem since there is a parameter for that, but because font-face in Compass treats svg no different from other formats I simply cannot use inline-font-files to include the font data, since that would make the svg version inline as well.

Is there a way to make font-face return something like the below:

@font-face {
    font-family: 'PTSans';
    src: url('pts55fwebfont.eot');
    src: url('pts55fwebfont.eot?#iefix') format('embedded-opentype'),
         url('data:WOFF_DATA') format('woff'),
         url('data:TTF_DATA') format('truetype'),
         url('pts55fwebfont.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

The thing is I cannot figure out how to make the woff, otf and ttf versions use the Data URI while still allowing the svg version to use a standard URL. The best I have come up with is this:

@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular'), $weight: normal, $style: normal);

Which will break the svg into its own @font-face. Is that valid CSS on the same account that I can create multiple @font-face rules with the same family name using different weights and styles? If that is the case, will it work just as good as the example CSS above (it appears to)? And, of course, is there a better way of accomplishing this in Compass/sass?

Answer 1

For those interested, the workaround mentioned in the question seems to work pretty well. It is probably a good idea to move the eot file attribute from data URI @font-face rule to the one using a standard url(). It appears sometimes the data: URL's generated are too long, which breaks the entire @font-face rule. Also, make sure the data URI rule is loaded last, since Firefox 5 and up seems to load only the last rule encountered. Hence, keep the inline fonts (woff, ttf, otf) in the last rule and the linked fonts (svg, eot) in the first, like so:

@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular') 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), $weight: normal, $style: normal);

Answer 2

Update. I acutally used a great little mixin from the Bourbon mixin site:

// Bourbon Mixin for top notch webfont support: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-face.scss
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
  @font-face {
      font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
      font-weight: $weight;
      font-style: $style;
  }
}

// Bourbon Mixin webfont setup: http://thoughtbot.com/bourbon/#font-face
@include font-face(ProximaNova, 'fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont');
@include font-face(ProximaNova, 'fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont', bold);
@include font-face(ProximaNova, 'fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont', normal, italic);

Answer 3

This mixin pretty much suits my needs in regards to data URI:s for some formats and http loading of others:

@mixin fontspring-font-face($family, $file, $svg_hash: $file, $weight: false, $style: false) {

    @font-face {
        font-family: quote($family);
          src: font-files("#{$file}.eot");
          src: font-files("#{$file}.eot?#iefix") format('eot'), inline-font-files("#{$file}.woff", woff, "#{$file}.ttf", truetype), font-files("#{$file}.svg##{$svg_hash}") format('svg');

          @if $weight {
              font-weight: $weight;
          }
          @if $style {
              font-style: $style;
          }
    }
}

EDIT: I should probably add that the generated CSS has a tendency to break in IE. Most likely due to the files included by inline-font-files being to large, resulting in a an invalid url(data:) value which in turn appears to render the entire src property invalid. It appears keeping the data URI versions in a separate css directive is the best solution.