Reputation: 123590
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
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
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