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);