Как правильно конвертировать шрифт?

Question

[uzi_no_uzi]

Скачал веб-ширифт с двумя начертаниями Regular и Bold. Каждого начертания было всего по три расширения woff2, woff, ttf. Я решил конвертировать шрифты что бы получить больше расширений для лучшей поддержки. Для этого я использовал вот этот инструмент: https://www.fontsquirrel.com/tools/webfont-generator

Я загрузил сразу два начертания. Выбрал нужные мне расширения и убрал префикс в Expert режиме инструмента.

Мне предоставили архив для скачивания конвертированных шрифтов. Я скачал, там были уже конвертированные шрифты и код для подключения. Но проблема в том, что сервис подумал, что конвертирую два разных шрифта, а не один шрифт с разными начертаниями.

И предоставил такой код:

@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;

}

Глядя на этот код, выходит, что для того что бы сменить начертание мне нужно использовать как-бы два разных шрифта, а не разные начертания.

Как можно исправить?

Answer 1

[Сергей delphinpro]

https://transfonter.org/

Answer 2

[Aleksey Solovyev]

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