CODEWITHSUNDEEP
cssruby-on-railsheroku
IvanSelivanov
IvanSelivanov

Reputation: 760

Error in CSS on Heroku

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?

Upvotes: 1

Views: 80

Answers (2)

IvanSelivanov
IvanSelivanov

Reputation: 760

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 :)

Upvotes: 0

Karim Tarek
Karim Tarek

Reputation: 907

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

  1. install bourbon gem (https://github.com/thoughtbot/bourbon)
  2. 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.

Upvotes: 1

Related Questions