Bourbon font-face outputting src surrounded by quotes - sass

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.

Related

Sass/Bourbon .css output has errors with #font-face mixin

I'm using the default Sass/Bourbon mixin font-face.scss but the generated css is wrong, for some reason nesting the body tag under #font-face. I have no errors when it generates the CSS but the fonts aren't showing of course.
Any ideas?
CSS output:
#font-face {
body {
font-family: AgencyFB Regular;
font-weight: normal;
font-style: normal;
src: url("../../fonts/agency/agencyfb_regular.eot");
src: url("../../fonts/agency/agencyfb_regular.eot?#iefix") format("embedded-opentype"),
url("../../fonts/agency/agencyfb_regular.woff") format("woff"),
url("../../fonts/agency/agencyfb_regular.ttf") format("truetype"),
url("../../fonts/agency/agencyfb_regular.svg#AgencyFB Regular") format("svg");
}
}
SCSS:
body {
#include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular");
font: $body-font-size;
line-height: $body-line-height;
}
Cimmanon's link pointed me in the right direction for a fix. Thanks!
Basically I moved the #include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular"); outside of any css tag (ie: body).
Then included a font-family: AgencyFB Regular in the body tag.
Like this:
#include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular");
body {
font-family: AgencyFB Regular;
font: $body-font-size;
line-height: $body-line-height;
}

Font-face not working from CDN - CORS already set

I'm having an issue with Firefox where one of my fonts isn't loading from my CDN. I already have Access-Control-Allow-Origin set to *.
The font in question only has WOFF and EOT files (due to licensing) whereas the other font that works has WOFF, EOT, TTF and SVG files.
From what I understand WOFF is supported, https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Is there something I'm missing to get this to work?
#font-face {
font-family: 'ProximaNovaReg';
src: url('../fonts/ProximaNova-RegWeb.eot');
src: url('../fonts/ProximaNova-RegWeb.eot#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-RegWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ProximaNovaSbold';
src: url('../fonts/ProximaNova-SboldWeb.eot');
src: url('../fonts/ProximaNova-SboldWeb.eot#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-SboldWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I solved this by removing #iefix but it looks like it should have been ?#iefix. I found more information here: CSS Font Face "?#iefix"

#font-face not working in firefox only

Using this #font-face css. works in Chrome, Safari, and IE, only not Firefox. All required files are uploaded to the server.
CSS:
#font-face {
font-family: 'Calgary';
src: url('../fonts/calgary.eot');
src: url('../fonts/calgary.eot?#iefix') format('embedded-opentype'),
url('../fonts/calgary.woff') format('woff'),
url('../fonts/calgary.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#header-text-webform {
position: relative;
top: 59px;
left: 20px;
font-family: 'Calgary', 'Helvetica', 'Arial', sans-serif !important;
color: white;
font-size: 26px;
font-weight: normal;
text-transform: uppercase;
z-index: 1;
}
You have a duplicate src declaration. Remove this line:
src: url('../fonts/calgary.eot');
and see if that helps at all. If Firefox only reads this, first, src definition, it will be trying to load an EOT font which it doesn't support...
I always use the following structure and have no issues in firefox (or anything else)
#font-face {
font-family: 'Calgary';
src: url('/fonts/calgary.eot');
src: url('/fonts/calgary.eot?#iefix') format('embedded-opentype'),
url('/fonts/calgary.woff') format('woff'),
url('/fonts/calgary.ttf') format('truetype'),
url('/fonts/calgary.svg#calgary') format('svg');
font-weight: normal;
font-style: normal;
}

#font-face not embedding in IE8 and under

for some reason the font is not rendering in IE 8 and under. I've applied the IE fix (.eot?#iefix) which always has worked but for some reason it's not this time. Anybody know what's going wrong or have had an issue like this as well? Here's what I have:
#font-face {
font-family: 'rrb-main';
src: url('./assets/rrb-main.eot');
src: url('./assets/rrb-main.eot?#iefix') format('embedded-opentype'),
url('./assets/rrb-main.woff') format('woff'),
url('./assets/rrb-main.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Try using double quotes around your tags like so:
#font-face {
font-family: "rrb-main";
src: url("./assets/rrb-main.eot");
src: url("./assets/rrb-main.eot?#iefix") format("embedded-opentype"),
url("./assets/rrb-main.woff") format("woff"),
url("./assets/rrb-main.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I don't know why but sometimes that works. This tag should work since you have the EOT version of the font.

Font Stack which includes Museo is not working at all in FireFox and Opera

I am using three different fonts. Here is my #fontface
#font-face {
font-family: 'Mikadan-Regular';
src: url('../fonts/mikadan/eot/style_134713.eot');
src: url('../fonts/mikadan/eot/style_134713.eot?#iefix') format('embedded-opentype'),
url('../fonts/mikadan/woff/style_134713.woff') format('woff'),
url('../fonts/mikadan/ttf/style_134713.ttf') format('truetype'),
url('../fonts/mikadan/svg/style_134713.svg#Mikadan-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSans500';
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot');
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.woff') format('woff'),
url('../fonts/museosans_500/MuseoSans_500-webfont.ttf') format('truetype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSlab500';
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot');
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.woff') format('woff'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.ttf') format('truetype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.svg#MuseoSlab500') format('svg');
font-weight: normal;
font-style: normal;
}
The first and the third work fine.
The second one is specified for the body tag as:
body, button, input, select, textarea {
font: 16px/1.625 MuseoSans500 "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
_font-size: 1em;
color: #333;
}
This works perfectly fine in Chrome and Safari
However, in Opera 11.50 and Firefox 4.0.1, bad news; the entire font stack does not work, and the font is rendered as plain old serif (yuck!)
I think the problem is with Museo,as when I take Museo out of the font stack it renders correctly.
I'm using these browsers on Windows 7.
You're missing a comma.
font: 16px/1.625 MuseoSans500 "Lucida Grande"
font: 16px/1.625 MuseoSans500, "Lucida Grande"
^^^ add this comma
Although you are missing that comma now, based on what you said, you were having problems with the MuseoSans500 font for body text. When you removed it you were fine. I think the comma is missing now that you are showing us your code.
I would try setting font-family to one choice at a time and see what happens. I would also separate the font-size and line-height just in case thereby isolating the problem, like so:
body, button, input, select, textarea {
font-family: MuseoSans500; /* start with this one by itself */
font-size: 16px;
line-height: 1.625;
color: #333;
}

Resources