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

Question

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?

Answer 1

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;
}