SASS and @font-face

Question

I have the following CSS - how would I describe it in SASS? I've tried reverse compiling it with css2sass, and just keep getting errors.... is it my CSS (which works ;-) )?

@font-face {   font-family: 'bingo';     src: url("bingo.eot");     src: local('bingo'),        url("bingo.svg#bingo") format('svg'),        url("bingo.otf") format('opentype'); } 

Answer 1

In case anyone was wondering - it was probably my css...

@font-face   font-family: "bingo"   src: url('bingo.eot')   src: local('bingo')   src: url('bingo.svg#bingo') format('svg')   src: url('bingo.otf') format('opentype') 

will render as

@font-face {   font-family: "bingo";   src: url('bingo.eot');   src: local('bingo');   src: url('bingo.svg#bingo') format('svg');   src: url('bingo.otf') format('opentype'); } 

which seems to be close enough... just need to check the SVG rendering

Answer 2

I’ve been struggling with this for a while now. Dycey’s solution is correct in that specifying the src multiple times outputs the same thing in your css file. However, this seems to break in OSX Firefox 23 (probably other versions too, but I don’t have time to test).

The cross-browser @font-face solution from Font Squirrel looks like this:

@font-face {     font-family: 'fontname';     src: url('fontname.eot');     src: url('fontname.eot?#iefix') format('embedded-opentype'),          url('fontname.woff') format('woff'),          url('fontname.ttf') format('truetype'),          url('fontname.svg#fontname') format('svg');     font-weight: normal;     font-style: normal; } 

To produce the src property with the comma-separated values, you need to write all of the values on one line, since line-breaks are not supported in Sass. To produce the above declaration, you would write the following Sass:

@font-face   font-family: 'fontname'   src: url('fontname.eot')   src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg')   font-weight: normal   font-style: normal 

I think it seems silly to write out the path a bunch of times, and I don’t like overly long lines in my code, so I worked around it by writing this mixin:

=font-face($family, $path, $svg, $weight: normal, $style: normal)   @font-face     font-family: $family     src: url('#{$path}.eot')     src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg')     font-weight: $weight     font-style: $style 

Usage: For example, I can use the previous mixin to setup up the Frutiger Light font like this:

+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')