Garmond is the font family
Then there is an @font for each stroke-weight combination that links the font source
Code:
@font-face {
font-family: 'Garamond';
font-weight: normal;
font-style: normal;
src: url('../Fonts/Garamond.ttf');
}
@font-face {
font-family: 'Garamond';
font-weight: bold;
font-style: normal;
src: url('\..\Fonts\Garamond Bold.ttf');
}
@font-face {
font-family: 'Garamond ;
font-weight: normal;
font-style: italic;
src: url('..\Fonts\Garamond Italic.ttf');
}
The usage refers to the Family: 'Garmond'
the weight and style will then select which (matching) Family member to use (the weight and style values must match the @ font)
In your example, you just have 2 Familys