Font Style Linking

I was writing up some CSS styles for a website the other day. I ran into some annoyance with the fact that included font faces had to be separated by bold, italic, etc. For example, I was using the Open Sans font, and I had to define each font-family differently for regular, bold and italic:

@font-face {
    font-family: 'Open Sans';
    src: url('Open-Sans-webfont.eot');
    src: url('Open-Sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-webfont.woff') format('woff'),
         url('Open-Sans-webfont.ttf') format('truetype'),
         url('Open-Sans-webfont.svg#OpenSans') format('svg');
}
@font-face {
    font-family: 'Open Sans Italic';
    src: url('Open-Sans-I-webfont.eot');
    src: url('Open-Sans-I-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-I-webfont.woff') format('woff'),
         url('Open-Sans-I-webfont.ttf') format('truetype'),
         url('Open-Sans-I-webfont.svg#OpenSansItalic') format('svg');
}
@font-face {
    font-family: 'Open Sans Bold';
    src: url('Open-Sans-B-webfont.eot');
    src: url('Open-Sans-B-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-B-webfont.woff') format('woff'),
         url('Open-Sans-B-webfont.ttf') format('truetype'),
         url('Open-Sans-B-webfont.svg#OpenSansBold') format('svg');
}

This really irked my need for clean, minimalist code. I felt like there had to be a way to define Open Sans and the weights/styles to go with it. In fact, I felt like I had seen it used somewhere in my studies back in the day.

I finally got flustered enough to do some research. After 30 minutes or so of Googling (keep in mind that that's a long time on the internet), I finally ran across this Smashing Magazine article. Eureka! I had finally found my solution. I could use the same font family, and define my font weights and styles just like a normal web font. Since it took me so long to find this gem, I thought I would share it.

It's quite simple actually and had been baked into CSS. I had assumed that I would be using some sort of Sass mixin or something with Compass, but all you have to do is define the same font-family name for each, and then the font-style and font-weight of the embedded font:

@font-face {
    font-family: 'Open Sans';
    src: url('Open-Sans-webfont.eot');
    src: url('Open-Sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-webfont.woff') format('woff'),
         url('Open-Sans-webfont.ttf') format('truetype'),
         url('Open-Sans-webfont.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('Open-Sans-I-webfont.eot');
    src: url('Open-Sans-I-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-I-webfont.woff') format('woff'),
         url('Open-Sans-I-webfont.ttf') format('truetype'),
         url('Open-Sans-I-webfont.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('Open-Sans-B-webfont.eot');
    src: url('Open-Sans-B-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-B-webfont.woff') format('woff'),
         url('Open-Sans-B-webfont.ttf') format('truetype'),
         url('Open-Sans-B-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;  /* Or 700 */
    font-style: normal;
}

Fantastic! Now I can define my font family as Open Sans for everything, then define bold or italic as needed. The really neat part that I didn't even think about until reading the article is since the font weights and styles are defined, when the fallback fonts are called they won't lose the font weights and styles. They will stay bold or italic because they are actually styled that way. This also means that <strong> and <em> tags are compatible and won't need extra styling.

There is one small catch, though. According to the article, this method crashes iPad 1 and Blackberry 9900 browsers regularly. If you're such a perfectionist that you're worried about 2 devices, then no worries! There is still a third technique that could probably be considered best practice, although it doesn't solve my need for clean, minimalist code since you still define separate font families:

@font-face {
    font-family: 'Open Sans';
    src: url('Open-Sans-webfont.eot');
    src: url('Open-Sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-webfont.woff') format('woff'),
         url('Open-Sans-webfont.ttf') format('truetype'),
         url('Open-Sans-webfont.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans Italic';
    src: url('Open-Sans-I-webfont.eot');
    src: url('Open-Sans-I-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-I-webfont.woff') format('woff'),
         url('Open-Sans-I-webfont.ttf') format('truetype'),
         url('Open-Sans-I-webfont.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans Bold';
    src: url('Open-Sans-B-webfont.eot');
    src: url('Open-Sans-B-webfont.eot?#iefix') format('embedded-opentype'),
         url('Open-Sans-B-webfont.woff') format('woff'),
         url('Open-Sans-B-webfont.ttf') format('truetype'),
         url('Open-Sans-B-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;  /* Or 700 */
    font-style: normal;
}

With this method, you get the best of both worlds. Since you define different names, you have more support across browsers and devices (mind you, just the two outliers mentioned above so far), and your font weights and styles are retained when the fall back fonts are used. However, <strong> and <em> elements will need extra styling with this method.

I prefer the second method for obvious reasons. My CSS stays cleaner with this method, and my styles and HTML have more semantic meaning due to retaining standard CSS definitions for bold and italic. The choice is up to you, though!

The Smashing Magazine article goes more in depth and shows you how to put these techniques into practice if you are looking for more details on how to use these methods and which to choose.

Posted in CSS/Sass on May 25, 2014

comments powered by Disqus