CODEWITHSUNDEEP
cssfontssassstyles
Kaitlyn Brown
Kaitlyn Brown

Reputation: 59

Fallback Font Weights in CSS

My font stylesheets are hosted on Fonts.com and out of my control. On the stylesheet, different weights of Avenir are implemented as different font families, each with a weight of 400. If the weight is anything but the default normal (400), the font renders oddly. So how do I make my fallback fonts bold while keeping the primary font weight as normal?

I tried to accomplish this by using the font CSS shorthand, thinking I could define different weights for each comma-separated value, like so:

font:   normal 400 18px 'Avenir 85 Heavy',
        normal 800 18px 'Calbri',
        normal 800 18px sans-serif;

But the browser doesn't recognize this structure, unfortunately, unless I eliminate all properties besides <font-family> on the fallbacks. Any suggestions, even inelegant ones?

Upvotes: 0

Views: 1274

Answers (1)

John Slegers
John Slegers

Reputation: 47101

When using @font-face, you typically want to apply a different font variant (= different font file), depending on whether your font is (1) normal, (2) italic, (3) bold or (4) italic + bold.

If you use the same font-family name for each variant along with their corresponding font-style and font-weight in your @font-face definitions, the correct font file will automatically be chosen depending on the font-style and font-weight of your elements.

Do this for all fonts defined with @font-face, and behavior should be as expected.

Demo

@font-face {
  font-family : 'Droid Serif';
  font-style : normal;
  font-weight : 400;
  src: local('Droid Serif'),
       local('DroidSerif'),
       url(https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaI4P5ICox8Kq3LLUNMylGO4.woff2)
       format('woff2');
}

@font-face {
  font-family : 'Droid Serif';
  font-style : normal;
  font-weight : 700;
  src : local('Droid Serif Bold'),
        local('DroidSerif-Bold'),
        url(https://fonts.gstatic.com/s/droidserif/v6/QQt14e8dY39u-eYBZmppwYlIZu-HDpmDIZMigmsroc4.woff2)
        format('woff2');
}

@font-face {
  font-family : 'Droid Serif';
  font-style : italic;
  font-weight : 400;
  src : local('Droid Serif Italic'),
        local('DroidSerif-Italic'),
        url(https://fonts.gstatic.com/s/droidserif/v6/cj2hUnSRBhwmSPr9kS5898u2Q0OS-KeTAWjgkS85mDg.woff2)
        format('woff2');
}

@font-face {
  font-family : 'Droid Serif';
  font-style : italic;
  font-weight : 700;
  src : local('Droid Serif Bold Italic'),
        local('DroidSerif-BoldItalic'),
        url(https://fonts.gstatic.com/s/droidserif/v6/c92rD_x0V1LslSFt3-QEpo9ObOXPY1wUIXqKtDjSdsY.woff2)
        format('woff2');
}

body {
  font-family : "Droid Serif", Georgia, serif;
}

.bold, .both {
  font-weight : 700;
}

.italics, .both {
  font-style : italic;
}
<h1>Title</h1>
<p>This is a paragraph with <b>some bold text</b>, <em>some text in italics </em> and <em><b>some text that is both bold and in italics</b></em>!</p>
<p>Depending on whether your text is <span class="bold">bold</span >, <span class="italics">in italics</span > or <span class="both">both</span >, a different font will be used for the same font family!</p>

Upvotes: 3

Related Questions