How to correctly generate a font for a site using fontsquirrel?

Question

css

Guys, how to correctly generate fonts for the site using fontsquirrel, so if you generated a font, let's say Roboto Regular and Roboto Bold, when you connect them, they work everything is OK, but when you want to make a bold font for a block, you write font-weight: 700 ;, then the font becomes standard, but at the same time bold, and to make the font bold, Roboto has to write to the font-family block. And many simply generate a font and write to the block font-weight: 700; and they are ok.

Answer 1

open the generated css file and write the same names for all fonts from the same family and directly font-style / font-weight depending on the font name, for example:

@font-face {
    font-family: 'pf';
    src: url('pfbaguesanspro-bold_0.eot');
    src: url('pfbaguesanspro-bold_0.eot?#iefix') format('embedded-opentype'),
         url('pfbaguesanspro-bold_0.woff2') format('woff2'),
         url('pfbaguesanspro-bold_0.woff') format('woff'),
         url('pfbaguesanspro-bold_0.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'pf';
    src: url('pfbaguesanspro-light.eot');
    src: url('pfbaguesanspro-light.eot?#iefix') format('embedded-opentype'),
         url('pfbaguesanspro-light.woff2') format('woff2'),
         url('pfbaguesanspro-light.woff') format('woff'),
         url('pfbaguesanspro-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'pf';
    src: url('pfbaguesanspro-medium.eot');
    src: url('pfbaguesanspro-medium.eot?#iefix') format('embedded-opentype'),
         url('pfbaguesanspro-medium.woff2') format('woff2'),
         url('pfbaguesanspro-medium.woff') format('woff'),
         url('pfbaguesanspro-medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

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

but in general, the Roboto font is in google fonts, it's easier to connect through it
ps change "nothing" in your profile to "nothing"))