8

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!

Conspicuous Compiler
  • 6,403
  • 1
  • 40
  • 52
Arnold Oosterom
  • 127
  • 1
  • 1
  • 8
  • possible duplicate of [How to remove the hash from Compass's generated sprite image filenames?](http://stackoverflow.com/questions/9183133/how-to-remove-the-hash-from-compasss-generated-sprite-image-filenames) (Adding random numbers to source URLs by Compass is called "cache busting" and it's used for various sources, not only fonts.) – hon2a Dec 01 '14 at 21:23

2 Answers2

13

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 */
}
Mohamad Shiralizadeh
  • 8,329
  • 6
  • 58
  • 93
2

Just add this line to your config.rb:

asset_cache_buster :none
slfan
  • 8,950
  • 115
  • 65
  • 78
nikopiko
  • 21
  • 1