Error in CSS on Heroku

Question

Designer sent me following css:

@font-face {
  font-family: 'Proxima';
  src: url('../fonts/ProximaNova-Reg-webfont.eot');
  src: local('☺'), url('../fonts/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-Reg-webfont.woff') format('woff'), url('../fonts/ProximaNova-Reg-webfont.ttf') format('truetype'), url('../fonts/ProximaNova-Reg-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

In context of my question most important is the longest line starting with src: local. This is how it looks like in my style.css.scss:

src: local('☺'), font_url('ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'), font_url('ProximaNova-Reg-webfont.woff') format('woff'), font_url('ProximaNova-Reg-webfont.ttf') format('truetype'), font_url('ProximaNova-Reg-webfont.svg') format('svg');

And everything works fine locally, but when I push project to heroku I get following error:

 Sass::SyntaxError: Invalid CSS after "...4561e1481029429": expected ")", was ".eot?#iefix) fo..."

I'm not that good at CSS to understand what this particular tiny piece of code means, but I guess designer had a reason to put it there. So what do I have to do to make it work and why it works locally (in development). And what is this line for? maybe I could just delete it?

Karim Tarek · Accepted Answer · 2015-04-10 18:59:14Z

1

That line looks funny, what I would do to avoid this, is:

install bourbon gem (https://github.com/thoughtbot/bourbon)
replace this css block with @include font-face("Proxima", "../fonts/ProximaNova-Reg-webfont", normal, normal);

This Bourbon's mixin going to take care of generating the proper css code with all the extensions, ideally this should work, just make sure of your font path.

answered Apr 10, 2015 at 18:59

Karim Tarek

9176 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IvanSelivanov Over a year ago

For now I just deleted this line and I guess bourbon would not generate it also. Everything seems to be working, but there definitely IS a reason for this line to be where it is. My guess it is for non-unicode currency symbol. If it's true, then I simply don't need it, but there is some probability that it is there for something really useful. So it seems, I have no other way but to google for the meaning of this dam line :)

IvanSelivanov · Accepted Answer · 2015-04-10 20:43:20Z

0

So I found the meaning of that line. It is a hack, which forces all browsers, especially IE (curse on it's creators for eleven generations), to download a font instead of using local one (even if it exists). It's a bit slower, but eliminates probability that local font with the same name is different. So I just used a different hack (which is, by the way, said to be better):

src: font_url('ProximaNova-Reg-webfont.eot?') format('eot'), font_url('ProximaNova-Reg-webfont.woff') format('woff'), font_url('ProximaNova-Reg-webfont.ttf') format('truetype'), url('ProximaNova-Reg-webfont.svg') format('svg');

And, what is the most important, it works :)

answered Apr 10, 2015 at 20:43

IvanSelivanov

7605 silver badges16 bronze badges

Collectives™ on Stack Overflow

Error in CSS on Heroku

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related