So i have just recently upgraded to the latest bourbon (4.0.2 and sass (3.4.8). Since doing this, the font-face
mixin outputs the src surrounded by double quotes, which is invalid and is breaking by fonts.
@include font-face('Avenir', '../fonts/avenir/avenir-regular');
Expected result (no double quotes around src):
@font-face {
font-family: "Avenir";
font-weight: normal;
font-style: none;
src: url('../fonts/avenir/avenir-regular.eot') format('embedded-opentype');
src: url('../fonts/avenir/avenir-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/avenir/avenir-regular.woff') format('woff'), url('../fonts/avenir/avenir-regular.ttf') format('ttf'), url('../fonts/avenir/avenir-regular.svg#avenir') format('svg');
}
Output (double quotes around src):
@font-face {
font-family: "Avenir";
font-weight: normal;
font-style: none;
src: "url('../fonts/avenir/avenir-regular.eot') format('embedded-opentype')";
src: "url('../fonts/avenir/avenir-regular.eot?#iefix') format('embedded-opentype')", "url('../fonts/avenir/avenir-regular.woff') format('woff')", "url('../fonts/avenir/avenir-regular.ttf') format('ttf')", "url('../fonts/avenir/avenir-regular.svg#avenir') format('svg')";
}
The font-face
mixin is as follows (see annotated line):
@mixin font-face(
$font-family,
$file-path,
$weight: normal,
$style: normal,
$asset-pipeline: $asset-pipeline,
$file-formats: eot woff ttf svg) {
$font-url-prefix: font-url-prefixer($asset-pipeline);
@font-face {
font-family: $font-family;
font-weight: $weight;
font-style: $style;
@if contains($file-formats, eot) {
// THIS IS THE TROUBLE LINE
src: "#{$font-url-prefix}('#{$file-path}.eot') format('embedded-opentype')";
}
src: font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url-prefix
);
}
}
Is anyone else able to replicate this?
Any ideas are really appreciated.