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

Question

I'm including the Open Sans font in my website by using SASS and the 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 formerly just 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 well. And at the top of my scss file I have: @import "compass/css3/font-face";

Answer 1

Have look to your config.rb file would help but, assuming there nothing relative in it, the generated 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( as you did but by discarding "../fonts" in your urls.

If the folder containing the compiled css is outside your sass project then I recommend you to use http_fonts_path to avoid any mistake in urls. It will allow you to specify an absolute url starting from your app or website DocumentRoot directory.

In the following example fonts 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 to config.rb