How to convert a font correctly?

Question

css

I downloaded a web font with two styles Regular and Bold. Each style had only three extensions woff2, woff, ttf. I decided to convert fonts to get more extensions for better support. To do this, I used this tool: https://www.fontsquirrel.com/tools/webfont-generator
I downloaded two styles at once. I selected the extensions I needed and removed the prefix in the Expert mode of the tool.
I was provided with an archive to download the converted fonts. I downloaded, there were already converted fonts and a connection code. But the problem is that the service thought that I was converting two different fonts, and not one font with different styles.
And provided this code:

@font-face {
    font-family: 'fira_sansbold';
    src: url('firasansbold.eot');
    src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
         url('firasansbold.woff2') format('woff2'),
         url('firasansbold.woff') format('woff'),
         url('firasansbold.ttf') format('truetype'),
         url('firasansbold.svg#fira_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'fira_sansregular';
    src: url('firasansregular.eot');
    src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
         url('firasansregular.woff2') format('woff2'),
         url('firasansregular.woff') format('woff'),
         url('firasansregular.ttf') format('truetype'),
         url('firasansregular.svg#fira_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Looking at this code, it turns out that in order to change the style, I need to use two different fonts, as it were, and not different styles.
How can I fix it?

Answer 1

https://transfonter.org/

Answer 2

https://www.fontsquirrel.com/tools/webfont-generator is a simple gulp generator (probably) written. It downloads the file. The file name without extension is placed in the title, the full file name is placed in the url. The output is your code.
If you want to use the same font with different "thickness", then change the name and font-weight

@font-face {
    font-family: 'fira_sans';
    src: url('firasansbold.eot');
    src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
         url('firasansbold.woff2') format('woff2'),
         url('firasansbold.woff') format('woff'),
         url('firasansbold.ttf') format('truetype'),
         url('firasansbold.svg#fira_sansbold') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'fira_sans';
    src: url('firasansregular.eot');
    src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
         url('firasansregular.woff2') format('woff2'),
         url('firasansregular.woff') format('woff'),
         url('firasansregular.ttf') format('truetype'),
         url('firasansregular.svg#fira_sansregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

Now you can use it like this:

*{  
  font-family: "fira_sans";
}
.bold{
  font-weight: 700
}
.normal{
  font-weight: 400
}

ps or include standard fonts via fonts.google.com . Here is Fira Sans