https://www.fontsquirrel.com/tools/webfont-generator - это простой генератор на gulp(наверно) написанный. Он загружает файл. Имя файла без расширения помещает в название, полное имя файла помещает в url. На выходе и получаем Ваш код.
Если хотите использовать один шрифт с разной "толщиной", то поменяйте название и 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;
}
Теперь можно использовать так:
*{
font-family: "fira_sans";
}
.bold{
font-weight: 700
}
.normal{
font-weight: 400
}
ps или подключайте стандартные шрифты через
fonts.google.com. Вот
Fira Sans
