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

Answer 1

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 2

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 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.