Can I merge a font-family in CSS to have more font varians via @font-face?

Question

I have this code:

@font-face {
    font-family: 'Conv_Casper';
    src: url('fonts/Casper.eot');
    src: local('☺'), url('styles/casper/Casper.woff') format('woff'), url('fonts/Casper.ttf') format('truetype'), url('fonts/Casper.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_Casper Italic';
    src: url('fonts/Casper Italic.eot');
    src: local('☺'), url('styles/casper/Casper Italic.woff') format('woff'), url('fonts/Casper Italic.ttf') format('truetype'), url('fonts/Casper Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_Casper Bold';
    src: url('fonts/Casper Bold.eot');
    src: local('☺'), url('styles/casper/Casper Bold.woff') format('woff'), url('fonts/Casper Bold.ttf') format('truetype'), url('fonts/Casper Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_Casper Bold Italic';
    src: url('fonts/Casper Bold Italic.eot');
    src: local('☺'), url('styles/casper/Casper Bold Italic.woff') format('woff'), url('fonts/Casper Bold Italic.ttf') format('truetype'), url('fonts/Casper Bold Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

it's the same "font", but it change due to the weight/style. Can I merge those style in one font-family?

Answer 1

It seems that you can, this is from the W3 Spec:

These descriptors define the characteristics of a font face and are used in the process of matching styles to specific faces. For a font family defined with several @font-face rules, user agents can either download all faces in the family or use these descriptors to selectively download font faces that match actual styles used in document. The values for these descriptors are the same as those for the corresponding font properties except that relative keywords are not allowed, ‘bolder’ and ‘lighter’. If these descriptors are omitted, default values are assumed.

Take a look at this example from Google Fonts:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');
}

A usage example:

.will-use-the-first-font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
}

.will-use-the-second-font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
}

.will-use-the-third-font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
}