If you are using several fonts from a single family, you may wish to designate basic styles: bold, italic and bold italic. This will enable you to use simple tags in your html to specify these variations.
To achieve this you must modify some of the font-family, font-style and font-weight elements in the @font-face declarations.
For each font you wish to include, set the @font-face font-family to the same value. Then for each @font-face declaration, change the font-style and font-weight values accordingly.
Here is an example of some style-linked @font-face declarations using a the 4-font family we have called Browser-Sans.
@font-face {
font-family: 'Browser-Sans';
src: url('Browser-Sans-Regular.woff2') format('woff2');
src: url('Browser-Sans-Regular.woff') format('woff');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: 'Browser-Sans';
src: url('Browser-Sans-Ital.woff2') format('woff2');
src: url('Browser-Sans-Ital.woff') format('woff');
font-style: italic;
font-weight: normal;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: 'Browser-Sans';
src: url('Browser-Sans-Bold.woff2') format('woff2');
src: url('Browser-Sans-Bold.woff') format('woff');
font-style: normal;
font-weight: bold;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: 'Browser-Sans';
src: url('Browser-Sans-BoldItal.woff2') format('woff2');
src: url('Browser-Sans-BoldItal.woff') format('woff');
font-style: italic;
font-weight: bold;
text-rendering: optimizeLegibility;
}
Note that in this instance we are using both formats of the full character set version and that the font-family is the same for each declaration, the src: url() is the required font file and the font-style and font-weight are set to match the required font variant.