1

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;
}
Jefe
  • 67
  • 6
  • Not sure what you're expecting, but `@font-face { body {} }` is just as invalid as `body { @font-face {} }`. – cimmanon Jun 25 '14 at 02:05
  • where else can you put the `@include font-face` then? the outputted css should have a separate `@font-face` section and a `body` section that includes `font-family:AgencyFB Regular`, but it's nesting it. – Jefe Jun 25 '14 at 02:23
  • Have you tried checking the related links? `--------------->` (hint: http://stackoverflow.com/questions/20254869/bourbons-font-face-mixin) – cimmanon Jun 25 '14 at 02:26

1 Answers1

0

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;
}
Jefe
  • 67
  • 6