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

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.