CODEWITHSUNDEEP
csswebfontstypography
mikemaccana
mikemaccana

Reputation: 123590

Web fonts: how can I specify weight without changing the font family?

Webfonts for different weights are in different files, and hence typically appear as a different font-family:

@font-face {
 font-family: 'LatoWeb'; 
 src: url('/fonts/blog/Lato-Regular.eot');
 src: url('/fonts/blog/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-Regular.woff2') format('woff2'),
      url('/fonts/blog/Lato-Regular.woff') format('woff'),
      url('/fonts/blog/Lato-Regular.ttf') format('truetype');
 font-style: normal;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}


@font-face {
 font-family: 'LatoWebSemibold';
 src: url('/fonts/blog/Lato-SemiboldItalic.eot');
 src: url('/fonts/blog/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-SemiboldItalic.woff2') format('woff2'),
      url('/fonts/blog/Lato-SemiboldItalic.woff') format('woff'),
      url('/fonts/blog/Lato-SemiboldItalic.ttf') format('truetype');
 font-style: italic;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}

With non-web fonts, I can specify font-weight: 400 or font-weight: 200 and have the heavier or lighter version of the font used.

However it seems with web fonts that I would have to change the font-family as well as the font-weight to change how heavy the font is.

Can I use different versions of the same font-family just by specifying the font-weight?

Or is that not possible, and do sites that use web fonts change the font-family every time they change the weight?

Upvotes: 1

Views: 1265

Answers (2)

Mario Steinitz
Mario Steinitz

Reputation: 293

You don't have to change the font family. In fact you keep the font family the same and just alter the values for font-style and font-weight. Keep in mind, that the standard font should be mentioned first, as this prevents certain browsers from not recognizing your definitions well:

@font-face {
 font-family: 'LatoWeb'; 
 src: url('/fonts/blog/Lato-Regular.eot');
 src: url('/fonts/blog/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-Regular.woff2') format('woff2'),
      url('/fonts/blog/Lato-Regular.woff') format('woff'),
      url('/fonts/blog/Lato-Regular.ttf') format('truetype');
 text-rendering: optimizeLegibility;
}

@font-face {
 font-family: 'LatoWeb';
 src: url('/fonts/blog/Lato-SemiboldItalic.eot');
 src: url('/fonts/blog/Lato-SemiboldItalic.eot?#iefix') format('embedded-    opentype'),
      url('/fonts/blog/Lato-SemiboldItalic.woff2') format('woff2'),
      url('/fonts/blog/Lato-SemiboldItalic.woff') format('woff'),
      url('/fonts/blog/Lato-SemiboldItalic.ttf') format('truetype');
 font-style: italic;
 font-weight: normal; /* for a semibold typo, you might want to set a different value */
 text-rendering: optimizeLegibility;
}

So you can reference the font like:

.my-font-element {
  font-family: 'LatoWeb';
}
.my-font-element .italic {
  font-style: italic;
}

Upvotes: 2

twernt
twernt

Reputation: 20601

When you change the font-family, you don't need to also specify the font-weight or font-style. Instead, you can declare classes for each font variation you are using.

For example:

.lato-web {
  font-family: 'LatoWeb';
}

.lato-web-semibold {
  font-family: 'LatoWebSemibold';
}

In addition, text in a web font that is coerced into a different weight via font-weight may not render as nicely text left at its native weight.

Upvotes: 0

Related Questions