@include font-face SCSS issue

Question

While trying to have my SCSS import some fonts I encountered the following:

I exactly copied the docs from the compass website, but when the CSS is being compiled Compass adds random numbers behind my src URLs. The SCSS code I wrote and the resulting CSS looks like this

SCSS

@include font-face("NexaBold", font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"));    

Resulting CSS

@font-face {
   font-family: "NexaBold";
   src: url('/fonts/nexa_bold-webfont.woff?1417439024') format('woff'), url('/fonts/nexa_bold-webfont.ttf?1417439024') format('truetype'), url('/fonts/nexa_bold-webfont.svg?1417439024') format('svg'), url('/fonts/nexa_bold-webfont.eot?1417439024') format('embedded-opentype');
}

Thanks!

Answer 1

Random numbers were added because browser cache fonts base on url, then these random numbers cause every time you compile your codes and put it in your html, it download fonts again.

I have Visual Studio 2013 and compile your code with sass and the result is:

@font-face {
  font-family: "NexaBold";
  src: font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"); }

and here is my compass source for font-face mixin:

@mixin font-face(
  $name, 
  $font-files, 
  $eot: false,
  $weight: false,
  $style: false
) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}

if you look my compass version doesn't add any random number at the end of file path.

I myself suggest you to use font-face without compass, use code below:

@font-face {
    font-family: 'IranSans';
    src: url('/css/fonts/IranSans.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/IranSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/IranSans.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/IranSans.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/IranSans.svg') format('svg'); /* Legacy iOS */
}