Web TypographySetting Weights And Styles With The @font-face Declaration

Advertisement

If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for and want to read it as easily as possible. Either way, keeping text readable will help them achieve their goal.

Bold and Italic Help to Organize Content

A few months ago, I wrote an article on “Avoiding Faux Weights and Styles with Google Web Fonts201.” I ended the article by showing that weights and styles are an important UX element when setting text. Bold and italic forms of a font help people to skim your website. They add emphasis — both strong and subtle — that can help visitors understand the organization of content before even starting to read it.

1_organize_text2
Weights and styles are an important UX element. Bold and italic help readers to see structure and to skim the text more efficiently (left). The same text without bold or italic (right) feels more like a narrative.

In this article, we’ll start where we left off. Because weights and styles help our visitors to read our content, we should make sure they work! And getting weights and styles to work correctly using the @font-face declaration can be a bit crazy-making. Let’s look at two popular approaches to setting weights and styles with the @font-face declaration. I’ll show you why they are not the best solutions, and show you a third more effective approach to follow.

Unique Font-Family Names, Normal Weights And Styles

If you’ve used one of FontSquirrel3’s amazing @font-face kits, then you’re familiar with this approach to setting weights and styles. The CSS provided in every kit uses a unique font-family name for each weight and style, and sets the weight and style in the @font-face declaration to normal.

For example, the syntax for Ubuntu Italic and Ubuntu Bold looks like this:

@font-face {
   font-family: 'UbuntuItalic';
      src: url('Ubuntu-RI-webfont.eot');
      src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-RI-webfont.woff') format('woff'),
           url('Ubuntu-RI-webfont.ttf') format('truetype'),
           url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'UbuntuBold';
      src: url('Ubuntu-B-webfont.eot');
      src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-B-webfont.woff') format('woff'),
           url('Ubuntu-B-webfont.ttf') format('truetype'),
           url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
   font-weight: normal;
   font-style: normal;
}

Notice that the font-family names are unique, with each font-family name accessing the appropriate Web font files. For example, UbuntuItalic accesses Ubuntu-RI-webfont.woff, while UbuntuBold accesses Ubuntu-B-webfont.woff.

Also, notice that the font-weight and font-style for both @font-face declarations are set to normal.

Styling Text Using This Method

To style text using this method, use the appropriate font-family name, and keep all weights and styles set to normal. For example, the Regular, Regular Italic, Bold and Bold Italic headings below are set with classes. The classes are styled like so:

.u400 {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u400i {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u700 {
   font-family: 'UbuntuBold', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u700i {
   font-family: 'UbuntuBoldItalic', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

2_unique_font-families4
Ubuntu Regular, Italic, Bold and Bold Italic on Windows 7 in Internet Explorer 8 (top) and on Mac OS X in Chrome 23 (bottom). Unique font-family names with normal weights and styles (á la FontSquirrel) work fine.

Make Sure the Weights and Styles Match!

Because the weights and styles are set to normal in the @font-face declarations, keeping the weights and styles set to normal when styling the text is important. Otherwise, the bolds may double-bold (some browsers will add a bold weight to the already bold Web font), and the italics may double-italic (some browsers will add an italic style to the already italic Web font).

For example, let’s say we incorrectly set the font-style to italic and the font-weight to 700 (bold) in our corresponding classes:

.u400 {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u400i {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: normal;
   font-style: italic;
}

.u700 {
   font-family: 'UbuntuBold', arial, sans-serif;
   font-weight: 700;
   font-style: normal;
}

.u700i {
   font-family: 'UbuntuBoldItalic', arial, sans-serif;
   font-weight: 700;
   font-style: italic;
}

The fonts will render incorrectly in Mac OS X browsers and on iPad Safari browsers.

3_unique_double-bold5
When using normal weights and styles in the @font-face declaration, give text elements normal weights and styles, too. Otherwise, your text may end up with a double-bold and double-italic. If you set text elements as bold or italic, then Ubuntu Italic, Bold and Bold Italic won’t double-bold or double-italic on Windows 7 in Internet Explorer 8 (top). But look at what happens on Mac OS X in Firefox 17 and on iPad 3 with iOS 5.1 in Safari (bottom) — yikes!

Using <em> and <strong> Elements

While <em> and <strong> can be styled to communicate emphasis and importance in a variety of ways, they are often used in their default forms: with <em> set to italic text and <strong> set to bold text.

For example, the paragraph below is styled like so:

p {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

And the <em> and <strong> elements are left in their default states:

em {
   font-style: italic;
}

strong {
   font-weight: bold;
}

4_unique_em_strong_faux6
Applying <em> and <strong> in their default states results in faux italic and faux bold.

The result is a faux italic and a faux bold. Why? Because the paragraph is set to Ubuntu Regular, with the weight and style set to normal. When the <em> element is applied, the text remains Ubuntu Regular but is slanted to look like it’s italic. Notice the angular “e” and the double-story “a.” When the <strong> element is applied, the text remains Ubuntu Regular but is stretched to look like it’s bold. Notice the letter “e” is no longer monoline — the sides of the letter look thicker than the top and bottom of the letter.

We can fix this problem by making sure the <em> and <strong> elements use the correct font-family name. For example, the paragraph below continues to be styled like so:

p {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

And the <em> and <strong> elements are styled to use the correct corresponding font-family names:

em {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

strong {
   font-family: 'UbuntuBold', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

Notice that the font-weight and font-style for both <em> and <strong> are set to normal. This is counterintuitive, but necessary so that the text doesn’t end up with a double-italic or a double-bold.

5_unique_em_strong_fixed7
Using the correct font-family names — and setting weights and styles to normal — results in true italic and true bold.

The result is a true italic and true bold. Why? Because while the paragraph is set to Ubuntu Regular, the <em> element is set to Ubuntu Italic and the <strong> element is set to Ubuntu Bold — and all weights and styles are set to normal.

Problem: If the Fallback Font Loads, Weights and Styles Will Be Lost

While purposely stripping out weights and styles is counterintuitive, using a unique font-family name and normal weights and styles does work — as long as the Web font loads.

If the fallback font loads, then all bolds and italics will be lost — because we had set all weights and styles to normal — thus making it harder for readers to see the structure of your website’s content and making it harder for them to skim the text.

6_unique_fontfail8
If the Web font doesn’t load, then the fallback font (here, Times New Roman) will load with a normal weight and style — undermining hierarchy and readability. Remember, we had set all weights and styles to normal when we styled the elements!

The Short Version

Using unique font-family names combined with setting font-weight and font-style to normal is unforgiving. Mismatching weights and styles could easily result in either faux italic and faux bold or double-italic and double-bold. If the Web font doesn’t load, then the result will be no italic or bold! So, this approach to setting weights and styles using the @font-face declaration isn’t the best solution.

Style Linking

Another way to set weights and styles is to use the same font-family name multiple times, setting the weights and styles in each @font-face declaration to match the weight and style of the Web font file being accessed. This approach is called style linking.

For example, using style linking, the syntax for Ubuntu Italic and Ubuntu Bold would look like this:

@font-face {
   font-family: 'Ubuntu';
      src: url('Ubuntu-RI-webfont.eot');
      src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-RI-webfont.woff') format('woff'),
           url('Ubuntu-RI-webfont.ttf') format('truetype'),
           url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
   font-weight: 400;
   font-style: italic;
}

@font-face {
   font-family: 'Ubuntu';
      src: url('Ubuntu-B-webfont.eot');
      src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-B-webfont.woff') format('woff'),
           url('Ubuntu-B-webfont.ttf') format('truetype'),
           url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
   font-weight: 700;
   font-style: normal;
}

Notice that the font-family names are the same, regardless of what Web font file is being accessed. For example, Ubuntu accesses Ubuntu-RI-webfont.woff, and Ubuntu also accesses Ubuntu-B-webfont.woff. How does that work?

Notice that the font-weight and font-style for each @font-face declaration is set to match the weight and style of the Web font file being accessed. The Ubuntu that accesses the italic Web font file has font-style: italic. The Ubuntu that accesses the bold Web font file has font-weight: 700.

In this method, the weights and styles in the @font-face declarations act as “markers.” When a browser encounters those weights and styles elsewhere in the CSS, it knows which @font-family declaration to use and which Web font files to access.

Styling Text Using Style Linking

To style text with this method, use the same font family for all versions of the font. Set weights and styles to trigger the correct Web font files that the browser should access. If you want the italic version of the font, make sure to set font-style: italic. For example, the Regular, Regular Italic, Bold and Bold Italic headings below are set with classes. The classes are styled like so:

.u400 {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 400;
   font-style: normal;
}

.u400i {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 400;
   font-style: italic;
}

.u700 {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 700;
   font-style: normal;
}

.u700i {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 700;
   font-style: italic;
}

7_style-linking9
Ubuntu Regular, Italic, Bold and Bold Italic on Windows 7 in Internet Explorer 8 (top) and on Mac OS X in Chrome 23 (bottom). Using style linking to set weight and style appears to work fine.

Again, Make Sure the Weights and Styles Match!

Because weight and style are used to “trigger” the correct @font-face declaration, setting weights and styles to match those used in the @font-face declarations is important. As a bonus, when default rules for weights and styles are applied by browsers — like italic for <em> and bold for <strong> — then the correct fonts will automatically load (as long as your font has a bold and italic version), because the default rules will also trigger the correct @font-face declaration.

8_style-linking_em_strong10
When default rules for weights and styles are applied by browsers — like italic for <em> and bold for <strong> — then the correct fonts will automatically load (as long as your font has a bold and italic version). Again, using style linking to set weight and style appears to work fine.

Bonus: If the Fallback Font Loads, Weights and Styles Will Be Retained

Unlike the first approach, setting weights and styles with style linking means that weights and styles will be retained even when the Web font fails to load. Why? Because all weights and styles were set correctly (for example, not normal) when styling the text.

Note: If the Web font doesn’t load, then the fallback font (here, Times New Roman) will still provide hierarchy — bolds and italics will remain intact. Remember, we set all weights and styles to match the Web fonts when we styled the elements!

But style linking has its own problems…

Problem: Internet Explorer 7 and 8 Can Only Apply Up to Four Weights and Styles to a Single Font-Family Name

Style linking works — as long as you’re not using more than four weights and styles (and as long as the person reading your Web page isn’t the one of the one in eight people who still use Internet Explorer (IE) 7 or 8). If you use more than four weights and styles on the website, then IE 7 and 8 will convert all light and medium weights to normal, and all black and heavy weights to bold — so, you’ll lose some of your carefully set text.

10_style-linking_fail11
IE 7 and 8 can’t apply more than four weights and styles to a single font-family name. Ubuntu has eight weights and styles. If you used all eight with the font-family name Ubuntu, then the Light, Light Italic, Medium and Medium Italic would convert to Regular and Regular Italic.

Problem: Crashes Browsers on BlackBerry and iPad 1

No matter how well your fonts load, if the page crashes the browser, people won’t be able to see your content! And as of this writing, Web pages that use style linking crash BlackBerry 9900 browsers on a regular basis. They also crash iPad 1 browsers 100% of the time.

The Short Version

Using style linking appears to be more forgiving. It greatly reduces the potential for setting text that is faux italic and faux bold, or double-italic and double-bold. In addition, if the Web font doesn’t load, the text will retain both style and weight. But if you’re using more than four weights and styles, then text won’t render properly in IE 7 and 8. In addition, style linking crashes the browsers on BlackBerry and iPad 1 devices. So, this approach to setting weights and styles using the @font-face declaration isn’t the best solution at this time (although the future — when IE 7 and 8, BlackBerry 9900 and iPad 1 are all defunct — looks bright!).

Unique Font-Family Names, Matching Weights And Styles

A third — and currently the most effective — way to set weights and styles is to merge the first two methods. If you’ve used FontDeck12 for Web fonts, then you’ll be familiar with this approach.

Use the unique font-family names — which allows IE to show all of the weights and styles you need. Also, use matching weights and styles (for example, do not set weights and styles to normal), which will keep the weights and styles intact should the Web font fail.

For example, the syntax for Ubuntu Italic and Ubuntu Bold would like this:

@font-face {
   font-family: 'UbuntuItalic';
      src: url('Ubuntu-RI-webfont.eot');
      src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-RI-webfont.woff') format('woff'),
           url('Ubuntu-RI-webfont.ttf') format('truetype'),
           url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
   font-weight: 400;
   font-style: italic;
}

@font-face {
   font-family: 'UbuntuBold';
      src: url('Ubuntu-B-webfont.eot');
      src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-B-webfont.woff') format('woff'),
           url('Ubuntu-B-webfont.ttf') format('truetype'),
           url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
   font-weight: 700;
   font-style: normal;
}

Notice that the font-family names are unique, with each font-family name accessing the appropriate Web font files. For example, UbuntuItalic accesses Ubuntu-RI-webfont.woff, while UbuntuBold accesses Ubuntu-B-webfont.woff.

Also, notice the weight and style: The font-weight and font-style for each @font-face declaration is set to match the weight and style of the Web font file being accessed. The UbuntuItalic that accesses the italic Web font file has font-style: italic. The UbuntuBold that accesses the bold Web font file has font-weight: 700.

Styling Text Using the Combined Method

To style text with this method, use the unique font-family names, and set weights and styles to match those used in the @font-face declarations. For example, the Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Bold and Bold Italic headings below are set with classes. The classes are styled like so:

.u300 {
   font-family: 'UbuntuLight', arial, sans-serif;
   font-weight: 300;
   font-style: normal;
}

.u300i {
   font-family: 'UbuntuLightItalic', arial, sans-serif;
   font-weight: 300;
   font-style: italic;
}

.u400 {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: 400;
   font-style: normal;
}

.u400i {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: 400;
   font-style: italic;
}

.u700 {
   font-family: 'UbuntuMedium', arial, sans-serif;
   font-weight: 500;
   font-style: normal;
}

.u700i {
   font-family: 'UbuntuMediumItalic', arial, sans-serif;
   font-weight: 500;
   font-style: italic;
}

.u900 {
   font-family: 'UbuntuBold', arial, sans-serif;
   font-weight: 700;
   font-style: normal;
}

.u900i {
   font-family: 'UbuntuBoldItalic', arial, sans-serif;
   font-weight: 700;
   font-style: italic;
}

11_unique_style-linking13
By combining unique font-family names with matching weights and styles, all eight weights and styles of Ubuntu will work — even on Windows 7 in IE 8. And BlackBerry and iPad 1 browsers won’t crash.

Again, Make Sure the Weights and Styles Match!

Although using unique font-family names means we no longer need the weights and styles to “trigger” the correct @font-face declaration, setting all weights and styles to match is important. Applying weights and styles to text elements will keep them intact in case the Web font fails. Also, because the weights and styles match, the text won’t end up with either a double-bold or double-italic, or a faux bold or faux italic.

Problem: Using <em> and <strong> Elements

Using unique font-family names brings back an earlier problem: getting <em> and <strong> elements to work properly. Default styling on these elements will result in faux italic and faux bold text.

For example, the three paragraphs below are styled like so:

p.light {
   font-family: 'UbuntuLight', arial, sans-serif;
   font-weight: 300;
   font-style: normal;
}

p {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

p.medium {
   font-family: 'UbuntuMedium', arial, sans-serif;
   font-weight: 500;
   font-style: normal;
}

And the <em> and <strong> elements are left in their default states:

em {
   font-style: italic;
}

strong {
   font-weight: bold;
}

12_unique_style-linking_EmStrong_default14
Applying <em> and <strong> in their default states will result in faux italic and (usually) faux bold.

The result is a faux italic and a faux bold (when it’s applied). Why? Because we’re using unique font-family names. Let’s look at the middle paragraph. It’s set to Ubuntu Regular, with weight and style set to match (weight: normal and style: normal). When the <em> element is applied, the text remains Ubuntu Regular but is slanted to look like it’s italic. When the <strong> element is applied, the text remains Ubuntu Regular but is stretched to look like it’s bold.

We can fix the bold text by making sure the <strong> element uses the correct font-family name, weight and style:

strong {
   font-family: 'UbuntuBold', arial, sans-serif;
   font-weight: 700;
   font-style: normal;
}

The <em> is a bit more difficult to fix. We can set it to Ubuntu Regular Italic and use the matching weight and style:

em {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: 400;
   font-style: italic;
}

13_unique_style-linking_EmStrong_set15
Setting <em> to UbuntuRegularItalic and <strong> to UbuntuBold will result in an italic that’s too heavy for light text and too light for medium text.

The result is a bold and italic that are consistent throughout, regardless of the weight of the paragraph text. This may be fine for the <strong> element, but the <em> element looks a bit out of place on both the light and medium text.

The only way to fix this is to create a variety of classes for the <em> element, like so:

em {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: 400;
   font-style: italic;
}

em.light {
   font-family: 'UbuntuLightItalic', arial, sans-serif;
   font-weight: 300;
   font-style: italic;
}

em.medium {
   font-family: 'UbuntuMediumItalic', arial, sans-serif;
   font-weight: 500;
   font-style: italic;
}

14_unique_style-linking_Em3Strong_set16
Creating three versions of the <em> element (em, em.light, em.medium) will result in italics that “match” the weight of the text.

This will result in italics that match the weight of the text in each paragraph. This creates much better hierarchy, but it undermines the beauty of cascading style sheets and the simplicity of using a single <em> element.

Bonus: If the Fallback Font Loads, Weights and Styles Will Be Retained

Setting all weights and styles correctly (for example, not normal) when styling the text means that basic weights and styles will be retained even if the Web font doesn’t load.

15_unique_style-linking_fontfail17
If the Web font doesn’t load, then the fallback font (here, Times New Roman) will still provide hierarchy — bolds and italics will remain intact. But because fallback fonts don’t usually have “extra” weights (such as Light, Medium and Black), some weights will revert to Normal and Bold.

The Short Version

Using unique font-family names and setting weights and styles to match (for example, not setting them to normal) is the most effective method of getting weights and styles to work with the @font-face declaration. An extra step is required (i.e. setting and using unique font-family names — even with elements such as <em> and <strong>) to avoid faux italic and faux bold, but the solution does reduce the potential for double-italic and double-bold text. In addition, if the Web font doesn’t load, then the text will retain both style and weight. Finally, text will render properly in IE 7 and 8 (even if you’re using more than four weights and styles), and your pages won’t crash the browsers on BlackBerry 9900 and iPad 1 devices.

Make Sure Your Weights And Styles Work

Weights and styles help visitors read the content on your website. So, make sure your weights and styles load correctly — whether for IE 8, Chrome, Mac OS X Firefox or an iPad and whether or not the Web font loads correctly (or visitors see a fallback font).

When choosing which method to use for your website, ask yourself two questions:

  1. Will I be using more than four weights and styles on the website?
  2. Are BlackBerry and iPad 1 users part of my target audience?

If the answer to both questions is “no,” then go ahead and use style linking. It’s elegant and forgiving.

If the answer to either question is “yes,” then use the combined method. Currently, the only way to make sure your weights and styles work cross-browser is to use unique font-family names in conjunction with matching weights and styles (and, of course, to make sure your font has a bold and italic version). This might sound like a chore, requiring extra care and typing (UbuntuRegularItalic is longer to type than Ubuntu, after all), but as with most typographic details, the best results take time and effort. Even Typekit18, which uses JavaScript to handle the intricacies of Web fonts, requires variation-specific font-family names to support older versions of IE.

Once IE 7 and 8, BlackBerry 9900 browsers and the iPad 1 are defunct, using style linking alone should be enough to get the job done. But as of 28 January 2013, StatCounter19 reports that IE 7 and 8 alone were used for 12.3% of the 45 billion page views collected from November 2012 to January 2013. Information on mobile browsers is not clear, but a minimum of 1 in 8 visitors still need us to go the extra mile. So, for now, we’ve got some extra typing to do.

Further Resources

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2013/02/1_organize_text.png
  3. 3 http://www.fontsquirrel.com
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2013/02/2_unique_font-families.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2013/02/3_unique_double-bold.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2013/02/4_unique_em_strong_faux.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2013/02/5_unique_em_strong_fixed.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2013/02/6_unique_fontfail.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2013/02/7_style-linking.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2013/02/8_style-linking_em_strong.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2013/02/10_style-linking_fail.png
  12. 12 http://fontdeck.com
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2013/02/11_unique_style-linking.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/02/12_unique_style-linking_EmStrong_default.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2013/02/13_unique_style-linking_EmStrong_set.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2013/02/14_unique_style-linking_Em3Strong_set.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/02/15_unique_style-linking_fontfail.png
  18. 18 https://typekit.com
  19. 19 http://gs.statcounter.com
  20. 20 http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
  21. 21 http://www.alistapart.com/articles/say-no-to-faux-bold/
  22. 22 http://blog.typekit.com/2011/06/27/new-from-typekit-variation-specific-font-family-names-in-ie-6-8/

↑ Back to topShare on Twitter

Laura Franz is a Pro­fes­sor at UMass Dartmouth, where she teaches a wide range of type classes — including a Web Typography class in The Grad­u­ate Cer­tifi­cate In Web and Inter­ac­tion Design. Inspired by the intersection of tradition and technology, Laura shares her web font recommendations on goodwebfonts.com and her typography knowledge via “Typo­graphic Web Design: How to Think Like a Typog­ra­pher in HTML and CSS” (Wiley), “Typog­ra­phy for Web Design­ers” (lynda.com), and “Choosing and Using Web Fonts” (lynda.com).

Advertising
  1. 1

    Why go for such a complicated method, if you define your font faces correctly then you wont need to.
    All you need to do is declare the family name as the same for each and set the font style and font weights correctly.

    It called the correct file against for the correct font weight without having to define different font families for everything.

    The below works perfectly and then you only need to call 1 font family, the only thing is you need to specify the font weight and font style, but that’s still a hell of a lot simpler than having a dozen different font families lying around.

    @font-face {
    font-family: ‘CenturyGothic’;
    src: url(‘../fonts/gothic.eot’);
    src: url(‘../fonts/gothic.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/gothic.woff’) format(‘woff’), url(‘../fonts/gothic.ttf’) format(‘truetype’), url(‘../fonts/gothic.svg#gothic’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: ‘CenturyGothic’;
    src: url(‘../fonts/gothici.eot’);
    src: url(‘../fonts/gothici.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/gothici.woff’) format(‘woff’), url(‘../fonts/.ttf’) format(‘truetype’), url(‘../fonts/gothici.svg#gothici’) format(‘svg’);
    font-weight: normal;
    font-style: italic;
    }
    @font-face {
    font-family: ‘CenturyGothic’;
    src: url(‘../fonts/gothicbi.eot’);
    src: url(‘../fonts/gothicbi.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/gothicbi.woff’) format(‘woff’), url(‘../fonts/gothicbi.ttf’) format(‘truetype’), url(‘../fonts/gothicbi.svg#gothicbi’) format(‘svg’);
    font-weight: bold;
    font-style: italic;
    }
    @font-face {
    font-family: ‘CenturyGothic’;
    src: url(‘../fonts/gothicb.eot’);
    src: url(‘../fonts/gothicb.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/gothicb.woff’) format(‘woff’), url(‘../fonts/gothicb.ttf’) format(‘truetype’), url(‘../fonts/gothicb.svg#gothicb’) format(‘svg’);
    font-weight: bold;
    font-style: normal;
    }

    -2
    • 2

      This approach is covered in the article, along with its limitations, as the second outlined technique. The third, more complex technique, solves the associated issues.

      2
      • 3

        I’ve re-read the article two times but still found no hint on why to use unique font names. It’s only noted that one have to, but not why.

        Where is that point Reme and I are missing?

        -2
  2. 4

    On <em> and <strong> elements: These have a meaning. They are not supposed to be used solely for styling anyway. ;) Apart from that, nice article.
    Thanks – Jonas

    0
  3. 5

    Awesome solution Laura. I’d been avoiding @font-face because of the faux bold/italics issue until now, but looks like I can start using it.

    Have you tried using SASS at all yet? I bet I can turn this into a SASS mixin that would make implementation incredibly simple.

    0
    • 6

      I haven’t tried SASS yet. I’d be interested in seeing if it can be simplified!

      0
      • 7

        I’ve simplified the implementation into SASS, so it uses significantly less code and allows you to use mixins to attach styles semantically to elements. I think there’s some room for improvement and increased simplicity, but for now this is solid enough for me that I’m adding it to my starter kit.

        http://codepen.io/javasteve99/pen/hDxpn

        0
  4. 8

    In case if anyone is developing through Sass (Scss) there is a pretty good Bourbon Mixin for font-face that is even better than in-built Compass Mixin. You can find it here: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_font-face.scss

    0
  5. 9

    Aah this is good, I haven’t read through it all yet but it seems like quite a good tutorial for solid font-sizing. Two questions: Am I right when I say that Google webfonts bold/italic/book variations can be declared with font-weight instead of specific fonts? And second, even when the font is set right according to this article it still seems a bit too thick on Firefox Os/X (not as thick as in your examples) . Is that just the way Firefox on Os/x renders the font or could there be something else at play?

    0
    • 10

      Yes, you are right that Google webfonts bold/italic/book variation can be declared with font-weight instead of specific fonts. Google has something going on behind the scenes that keeps the fonts coming in fine, and doesn’t crash in iPad1 (instead the weights and styles don’t show up). But they work on all other browsers that support web fonts.

      Firefox on OS/X does render thicker. It’s my browser of choice because it’s less forgiving with font-related issues. Fonts on other browsers always seem too thin to me. :-)

      0
  6. 11

    In the last solution, could you use font-weight: inherit instead of creating separate classes for ems? Or would this cause a faux italic to be applied?

    0
  7. 13

    With the third method as you’ve outlined, you manage to avoid the double-bold and double-italic problem that you mentioned earlier in Mac OSX and iOS, I assume. Is that simply because you set the font-style and font-weight on both the @font-face and class declarations? When they match, therefore, OSX and iOS don’t apply faux italic and faux bold?

    0
  8. 15

    You forgot to mention something: nested `em` and `strong` tags. So if you have an `em` tag within a `strong` or vice versa, the text in the innermost tag will only receive the stylings for that tag. For example, if there is an `em` tag within a `strong` tag, the text within the `em` won’t be bold. This is simple to fix:

    em strong, strong em {
    font-family: ‘UbuntuBoldItalic’, arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    }

    In your example, with the numerous weights (light and medium) for your `em` tags, you’ll have to do a bit more work:

    em strong, em.light strong, em.medium strong, strong em, strong em.light, strong em.medium {
    font-family: ‘UbuntuBoldItalic’, arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    }

    Of course you need to do this because `em.light` has a higher precedence than `em strong`. Personally, I’d just stick with the a single weight. If I was going to use the light or medium weights, then I’d use them in special headings, in which I wouldn’t likely have to deal with `em` or `strong` tags.

    0
  9. 16

    Daniel Montgomery

    February 14, 2013 4:33 pm

    Thanks for this article, an issue I didn’t know existed with @font-face.

    0
  10. 17
  11. 18

    You do not need to assign “em” a class like “em.medium” in HTML if you use the information, that the “em” element is within a styled “p.medium” element.

    In CSS you can use “p.medium em” (or shorter “.medium em”) instead of “em.medium”.

    Then you can simple use “em” without a class in your html code and it could be styled according to the styling of the text block (its class) it is in.

    (applies to “strong” element and “light” class also …).

    0
    • 19

      John Mindiola III

      February 15, 2013 4:10 pm

      Preach it. Good stuff.

      0
    • 20

      Of course! Thank you for the simplification. I teach mostly beginning web students and rarely talk/write about elements styled within other elements (it can make heads spin). Totally flew by me when setting this page.

      0
  12. 21

    Is the iPad crashing still an issue? I’ve tested this second technique on an iPad 1, but it didn’t crash. Isn’t this fixed in an iOS update?
    According to this website: http://blog.typekit.com/2010/11/23/ios-4-2-improves-support-for-web-fonts/
    The issue has been resolved for over 2 years, so probably most devices have been upgraded since then..

    0
    • 22

      IMO, it’s probably safe to ignore the iPad 1. That being said, if supporting it is as easy as adopting this technique, then I’m going to support it. If you use SASS, you can make broad support even easier with these mixins I wrote: http://codepen.io/javasteve99/pen/hDxpn

      0
    • 23

      I didn’t think iPad1 was an issue, but when I tested at crossbrowsertesting.com, the dang thing kept crashing. I even worked with a (lovely and helpful) human being who did some additional testing for me on various iPads using various URLs to make sure it was the style-linking. Personally, I’d love to just let iPad1 go, and not worry about it… and I probably would if it were “only” a matter of fonts failing… but crashing the browser… I felt like I needed to share the info and let everyone else make educated decisions.

      1
  13. 24

    Excellent article!

    Thanks

    0
  14. 25

    Good article and a good choice of font: we use the Ubuntu font on our site http://www.nicetoclick.com/

    0
  15. 26

    Panuruj Khambanonda

    February 18, 2013 4:19 am

    Thank you for the very detailed article. I was experimenting with this a few months ago, and I came to the same conclusion.

    If anyone is using the Segoe UI font, Windows Phone 7 has the same font renamed to Segoe WP (who knows why…). Since the phone doesn’t support web fonts, you would need this to avoid double-bolding on the fallback font.

    @font-face
    {
    font-family: ‘Segoe UI Semibold’;
    font-style: normal;
    font-weight: 600;
    src: local(‘Segoe UI Semibold’), local(‘Segoe WP Semibold’);
    }

    0
  16. 27

    Laura,
    Great article, I can see the benefits of this system.
    Why call for multiple font formats? (woof, ttf, svg). Doesn’t that add to load time?

    0
    • 28

      Different browsers need different files in order to render fonts correctly. IE needs eot, many will work with ttf (but font designers aren’t crazy about those because they apparently are more open to theft), woff is supposedly more secure, and many browsers (besides IE) now support woff. SVG is still needed for most iPhones and iPads. If you don’t include svg, you’ll be leaving out tons of mobile folks!

      0
      • 29

        SVG hasn’t been needed on iOS devices for several years. As a matter of fact, OTF is the preferred choice, with TTF usable also, and I think WOFF also now. I don’t know anyone who uses SVG fonts for iOS.

        0
        • 30

          SVG fonts have their major advantages. Namely, the fact that they render so, so much better in Chrome.

          Serve an SVG font up via a Webkit media query and baby, you got a stew going.

          0
  17. 31

    Thank you for your article, Laura. I have to disagree with the following however:

    “Using unique font-family names combined with setting font-weight and font-style to normal is unforgiving. Mismatching weights and styles could easily result in either faux italic and faux bold or double-italic and double-bold. If the Web font doesn’t load, then the result will be no italic or bold! So, this approach to setting weights and styles using the @font-face declaration isn’t the best solution.”

    The risk of mismatching weights and styles when using unique font-family exists only in theory. Setting the weight and style to normal consistently is in my opinion perfectly achievable with a low error rate. As for the fallback font, despite being a potential issue, I again have to wonder whether this problem exists mostly on paper. For the fallback font to be loaded either the server that hosts the font is down or the browser does not support @font-face.

    The alternative work-around you suggested does come with several problems that can be overcome only in parts. My main issue would be the increased latency due to the additional HTTP requests. I just can’t agree that the majority of users should have slower rendering times in order to keep the tiny minority happy that can’t render @font-face.

    I think overall I would take my chances with unique names whilst gathering some data on what percentage of the visitors are actually rendering fallback fonts due to a lack of browser support.

    0
  18. 32

    Unfortunately I am still getting faux italic with this little experiment in IE8. I am using Pacifico script font, but I want it to degrade to serif italic if the font doesn’t load for some reason. I sneakily have declared it as font-style:italic in my @font-face.

    @font-face {
    font-family: ‘Pacifico’;
    src: url(‘Pacifico-webfont.eot’);
    src: url(‘Pacifico-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘Pacifico-webfont.woff’) format(‘woff’),
    url(‘Pacifico-webfont.ttf’) format(‘truetype’),
    url(‘Pacifico-webfont.svg#Pacifico’) format(‘svg’);
    font-weight: 500;
    font-style: italic;

    }

    This h1 style loads Pacifico correctly, but in IE8 the font still gets faux-italicised. Fall-back serif renders :italic as expected.

    h1{
    font-family: ‘Pacifico’, serif;
    font-weight: 500;
    font-style: italic;
    font-size: 32px;
    color: #f9a51a;

    Pretty sure I have followed all instructions correctly :(

    0
    • 33

      Just to clarify, IE9 renders the webfont and fall-back font as expected and described in this article :)

      0
  19. 34

    Laura,
    Over the last few months I have struggled with faux styles appearing as I build in downloaded fonts on my webpages. Your solution works fine in Firefox 27.0 and IE11. Thanks for your help. I was just wondering, since a year has passed by, if there are changes to any of the ideas in the article?
    Regards
    Barry Sharples

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top