Better font declaration #2969

davegandy opened this Issue Feb 25, 2014 · 4 comments


None yet
3 participants

davegandy added this to the 4.1.0 milestone Feb 25, 2014

That's already implemented I think:

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;

The format name of the second .eot is not equal to the name it should have: embedded-opentype. This is done so ie9 and later will not use .eot, but will use .woff (wich according to the article is better). It also contains a ? so that older ie wont download the rest and won't produce a 404 error. The only thing that's different is that Font-Awesome uses 2 src. Not sure why (would like to know if someone knows the answer :). I think it would be possible with just 1 combined src and with just setting up eot once?


tagliala commented May 6, 2014

the font declaration could be improved for some blackberry device:

#2112 (comment)

@davegandy davegandy modified the milestone: 4.1.1, 4.1.0 May 14, 2014


tagliala commented Jun 27, 2014

@davegandy there is room to "improve" the font declaration, by including a couple of rules documented in the troubleshooting guide:

font-variant: normal;
text-rendering: auto;

(octicons include font-variant: normal; in the font rule itself)

@davegandy davegandy modified the milestone: 4.1.1, 4.2.0 Aug 20, 2014


davegandy commented Aug 21, 2014

Just added these into 4.2.0. Also shortened the font declaration a good bit. We now have:

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

Double-checked this in IE8. Looks good to go.

davegandy closed this Aug 21, 2014

tagliala added the css label Aug 23, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment