Font Squirrel
после конвертирования шрифтов создает CSS файл, в котором все начертания одной и той же гарнитуры представлены в виде совершенно разных гарнитур. Рассмотрим в качестве примера PT Sans.
@font-face {
font-family: 'PTSansRegular';
src: url('PTS55F-webfont.eot');
src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS55F-webfont.woff') format('woff'),
url('PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansItalic';
src: url('PTS56F-webfont.eot');
src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS56F-webfont.woff') format('woff'),
url('PTS56F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBold';
src: url('PTS75F-webfont.eot');
src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS75F-webfont.woff') format('woff'),
url('PTS75F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBoldItalic';
src: url('PTS76F-webfont.eot');
src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS76F-webfont.woff') format('woff'),
url('PTS76F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Когда используется такой шрифт в сочетании с модификаторами начертаний font-weight и font-style
, то браузер автоматически пытается «сделать» шрифт полужирным или наклонным не обращая внимания, что для этого есть специально созданные начертания.
h1, h2, h3 { font-family: PTSansBold, Arial, sans-serif; }
Если такой шрифт подключается только для заголовков, где применяется, как правило, только полужирное начертание, то для альтернативных гарнитур полужирного начертания уже не будет!
Чтобы с начертаниями был полный порядок нужно поправить описания шрифтов.
@font-face {
font-family: 'PTSansWeb';
src: url('PTS55F-webfont.eot');
src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS55F-webfont.woff') format('woff'),
url('PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansWeb';
src: url('PTS56F-webfont.eot');
src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS56F-webfont.woff') format('woff'),
url('PTS56F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'PTSansWeb';
src: url('PTS75F-webfont.eot');
src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS75F-webfont.woff') format('woff'),
url('PTS75F-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'PTSansWeb';
src: url('PTS76F-webfont.eot');
src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS76F-webfont.woff') format('woff'),
url('PTS76F-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
Для начала указываем всем начертаниям одно и тоже имя.
Конкретно в этом примере я выбрал PTSansWeb
. Я намеренно отказался от оригинального имени для демонстрации подключения требуемого шрифта, а не какого-то другого. Разумеется в продакшине, если есть шанс, что гарнитура уже установлена у пользователя в системе, то его не стоит упускать. По этому для популярных шрифтов важно сохранять исходное название семейства шрифтов («PT Sans», в моём случае).
Затем в модификаторах начертания указываем значения, которые реально соответствуют начертанию каждого файла.
Всё это позволит браузеру выбирать нужное начертание шрифта как это происходит для обычных шрифтов, установленных в системе пользователя.
