Setting fonts in CSS: each style by name or weight property?

Question

css

Good evening gentlemen! Tell me at the moment the relevance of connecting fonts in this way:
(example with Open Sans, this is just an example, since the necessary web fonts may not be in Google or other services)

@font-face {
  font-family: "OpenSansRegular";
  src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot");
  src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot?#iefix")format("embedded-opentype"),
  url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.woff") format("woff"),
  url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "OpenSansLight";
  src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot");
  src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot?#iefix")format("embedded-opentype"),
  url("../fonts/OpenSans/OpenSansLight/OpenSansLight.woff") format("woff"),
  url("../fonts/OpenSans/OpenSansLight/OpenSansLight.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

etc.
I don't really like this type of connection, it's not convenient, each style is font-family: 'OpenSans[style]' and although there are now preprocessors, it's still more convenient to just put font-weight: [weight].
I read an article about this about a year and a half ago, and there is an emphasis on this particular style, and if you change font-weight and font-style when connecting, then this is not good, I don’t remember why.
Anyone with experience please share!

Answer 1

Correct like this:

@font-face {
  font-family: 'OpenSans';
  src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot");
  ...
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot");
  ...
  font-weight: 300;
  font-style: normal;
}

Usage example:

html {
  font-family: 'OpenSans', sans-serif;
  font-size: 14px;
}

.example-with-regular-text {
  // nothing
}

.example-with-light-text {
  font-weight: 300;
}

Answer 2

Both options will work, but manipulations with the style/weight properties are, of course, more convenient.
The hotel name option was popular a few years ago because it was more cross-browser at the time. But today there is no longer any reason to do so.