All geek questions in one place

What is wrong with my use of Compass @ font-face mixin?

I enable the Open Sans font on my website using SASS and Compass font-face mixin as follows:

@include font-face("Open Sans", font-files( "../fonts/opensans-light/OpenSans-Light-webfont.woff", "../fonts/opensans-light/OpenSans-Light-webfont.ttf", "../fonts/opensans-light/OpenSans-Light-webfont.svg#open_sanslight" ), "../fonts/opensans-light/OpenSans-Light-webfont.eot", 200); @include font-face("Open Sans", font-files( "../fonts/opensans-regular/OpenSans-Regular-webfont.woff", "../fonts/opensans-regular/OpenSans-Regular-webfont.ttf", "../fonts/opensans-regular/OpenSans-Regular-webfont.svg#open_sansregular" ), "../fonts/opensans-regular/OpenSans-Regular-webfont.eot", normal); @include font-face("Open Sans", font-files( "../fonts/opensans-semibold/OpenSans-Semibold-webfont.woff", "../fonts/opensans-semibold/OpenSans-Semibold-webfont.ttf", "../fonts/opensans-semibold/OpenSans-Semibold-webfont.svg#open_sanssemibold" ), "../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot", 600); @include font-face("Open Sans", font-files( "../fonts/opensans-bold/OpenSans-Bold-webfont.woff", "../fonts/opensans-bold/OpenSans-Bold-webfont.ttf", "../fonts/opensans-bold/OpenSans-Bold-webfont.svg#open_sansbold" ), "../fonts/opensans-bold/OpenSans-Bold-webfont.eot", bold);

I used CSS3 @ font-face as follows:

 @font-face { font-family: 'Open Sans'; src: url('../fonts/opensans-light/OpenSans-Light-webfont.eot'); src: url('../fonts/opensans-light/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-light/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/opensans-light/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/opensans-light/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('../fonts/opensans-regular/OpenSans-Regular-webfont.eot'); src: url('../fonts/opensans-regular/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular/OpenSans-Regular-webfont.woff') format('woff'), url('../fonts/opensans-regular/OpenSans-Regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot'); src: url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.woff') format('woff'), url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('../fonts/opensans-bold/OpenSans-Bold-webfont.eot'); src: url('../fonts/opensans-bold/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-bold/OpenSans-Bold-webfont.woff') format('woff'), url('../fonts/opensans-bold/OpenSans-Bold-webfont.ttf') format('truetype'), url('../fonts/opensans-bold/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: bold; font-style: normal; }

Which worked perfectly. And at the top of my scss file I have: @import "compass/css3/font-face";

+4
source share
1 answer

Look at your config.rb file, but assuming there is nothing relative in it, the created path in your css should look like this:

/{css_dir}/../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot

In your config.rb use relative_assets = true and set fonts_dir = "../fonts" otherwise by default your generated url will start with `` `fonts /` `''.

You can then use @include font-face( just like you, but dropping the "../fonts" in your URLs.


If the folder containing the compiled css is outside your sass project, I recommend that you use http_fonts_path to avoid errors in the urls. This will allow you to provide an absolute URL starting from your application directory or DocumentRoot website.

In the following example, font files are placed in '/ static / fonts':

config.rb

 http_fonts_path = "/static/fonts" # relative_assets = true # replace static by your public asset folder path

!! comment relative_assets = true if you use http_fonts_path !!

my.scss *

 @include font-face("Open Sans", font-files( "opensans-semibold/OpenSans-Semibold-webfont.woff", "opensans-semibold/OpenSans-Semibold-webfont.ttf" ), "opensans-semibold/OpenSans-Semibold-webfont.eot" );

Run compass clean after each change in config.rb

+8
source

Source: https://habr.com/ru/post/1492174/

More articles:


All Articles