How to use a specific style out of a font-family? - html

Question

I am trying to create my first website and I am experimenting with fonts from fontsquirrel.
The only problem is that I can use only some of the fonts I have downloaded through the site.
I am having a great deal of a problem in particular in writing the CSS code correctly, when the font family includes more than one style.
Lets take for example the LM Mono 10 Regular and Special Elite for example:
My code for special elite is the following and it works great:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'),
url('specialelite.woff2') format('woff2'),
url('specialelite.woff') format('woff'),
url(' specialelite.ttf') format('truetype'),
url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
and
.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}
This format is easy to work with because the special elite font-family has only one style.
BUT.. When I am trying to adapt this format on a font-family that has more than one styles like for example the LM Mono 10 family, it simply does not work....
http://www.fontsquirrel.com/fonts/Latin-Modern-Mono
I do not know if the mistake is on the way I am referring to the font family, or if I write the urls wrong... Could you please provide an example of the code in a reply?
Let's say for "Latin Modern Mono Light 10 Regular". How will the font-weight and font-style properties change? I just don't get it...

Answer 1

When I download the resources at the link you provided, it shows each font style as a completely different font family.
This is the Italic version:
#font-face {
font-family: 'latin_modern_mono10_italic';
src: url('lmmono10-italic-webfont.eot');
src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-italic-webfont.woff') format('woff'),
url('lmmono10-italic-webfont.ttf') format('truetype'),
url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg');
font-weight: normal;
font-style: normal;
}
This is the Regular version:
#font-face {
font-family: 'latin_modern_mono10_regular';
src: url('lmmono10-regular-webfont.eot');
src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-regular-webfont.woff') format('woff'),
url('lmmono10-regular-webfont.ttf') format('truetype'),
url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg');
font-weight: normal;
font-style: normal;
}
In order to use these fonts as-is, you will need to specify the appropriate font-family whenever you use them.
For example:
.fifth {
font-family: 'latin_modern_mono10_regular';
font-weight: normal;
...
}
or
.fifth {
font-family: 'latin_modern_mono10_italic';
font-weight: normal;
...
}

Answer 2

For Regular and Italic version:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'specialelite';
src: url('specialelite_italic.eot');
src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'), url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg');
font-weight: normal;
font-style: italic;
}
Now, you can use this for Regular: font-style: normal
.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}
OR this for Italic: font-style: italic
.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}