@include SCSS font problem

Question

While trying to import my SCSS some fonts, I found the following:

I definitely copied the documents from the compass site , but when the CSS compiles, Compass adds random numbers beyond 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")); 

CSS result

 @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 cache browser fonts are URL-based, then these random numbers are called every time you compile your codes and put them in your html, it loads the fonts again.

I have Visual Studio 2013 and compile my code with sass, and the result:

 @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 that my compass version does not add a random number to the end of the file path.

I myself suggest that you use font-face without a compass, use the following code:

 @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 */ } 

Answer 2

Just add this line to your config.rb:

 asset_cache_buster :none