Skip to content

Instantly share code, notes, and snippets.

@eyecatchup

eyecatchup/ie_css-font-attribute.md

Last active February 22, 2016 12:07
Show Gist options
  • Save eyecatchup/d1b69c6198c56697be3c to your computer and use it in GitHub Desktop.
Save eyecatchup/d1b69c6198c56697be3c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ie_css-font-attribute.md

After minification, this SCSS:

.class-a {
    font: 500 18px "TeleGrotesk", Arial, Helvetica, sans-serif;
}
.class-b {
    font: 500 18px TeleGrotesk, Arial, Helvetica, sans-serif;
}

will result in:

.class-a{font:500 18px"TeleGrotesk",Arial,Helvetica,sans-serif;}   /* doesn't work in IE */
.class-b{font:500 18px TeleGrotesk,Arial,Helvetica,sans-serif;}    /* does work in IE */

Even though both definitions look almost identical, in fact, there's a major difference:

It turned out that - due to the missing whitespace between the font-size and font-family values - IE will not interpret the font definition for class-a!

Solution: Either don't quote font families or write separated style definitions for font-weight, font-size + font-family.

Or, just drop IE support! 😉

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