Are there any differences between these types of font connection?

Question

css

And this is how I include the font on the page:

@font-face {
  font-family: 'HelveticaNeue-Bold';
  src: url('fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
  url('fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg'),
  url('fonts/HelveticaNeue-Bold.woff') format('woff'),
  url('fonts/HelveticaNeue-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
  url('fonts/HelveticaNeue.svg#HelveticaNeue-Bold') format('svg'),
  url('fonts/HelveticaNeue.woff') format('woff'),
  url('fonts/HelveticaNeue.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Then I create variables:

$font_regular: 'HelveticaNeue', sans-serif;
$font_bold: 'HelveticaNeue-Bold', sans-serif;

As a colleague suggests:

@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
  url('fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg'),
  url('fonts/HelveticaNeue-Bold.woff') format('woff'),
  url('fonts/HelveticaNeue-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
  url('fonts/HelveticaNeue.svg#HelveticaNeue-Bold') format('svg'),
  url('fonts/HelveticaNeue.woff') format('woff'),
  url('fonts/HelveticaNeue.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

That is, the same font-family names, and only then add font-weight in the code. Which way is better? And is there a difference in display between them?

Answer 1

just the second one is made for convenience and standardization. for example when you connect google fonts. you write for example font-family: 'PT sans'; and all. further if you need bold - write font-weight: bold; if italic - font-style: italic;
and with the first option, you need to change the font-family, which is not very convenient for someone. and for some it is not clear at all.

Answer 2

I prefer the first one due to greater readability later, it's easier to see the name in the code. The second did not use, differences? Create a file and in it connect all this to 4 duplicates of one building. and you will see the differences. And in general, always if you make up, first check all the fonts in this way. On the same lines.

Answer 3

it’s more convenient to change the variable or font-weight,
but sometimes the font has not only bold and regular, but a bunch of all sorts of variations
about formats and their optimization, you can read here, you will learn a lot.
https://developers.google.com/web/fundamentals/per...