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!
@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"; give the same, exact result compiled from Sass to CSS. Then, if you add one of these in a . scss file, you don't have to worry at all.
Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced. Create a font face rule that applies to bold and italic text. Create a font face rule that only sources a WOFF.
In your main SCSS compile file, import Font Awesome by adding the core styles file, @import "scss/fontawesome. scss" . Then import one or more styles.
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 */
}
Just add this line to your config.rb:
asset_cache_buster :none
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With