Установить шрифт для сайта

Содержание:

  1. Почему не Fontsquirrel
  2. Сервисы для конвертации шрифтов
  3. Как добавить шрифт на сайт

Почему не Fontsquirrel.

Не буду писать, зачем нужно делать шрифт кроссбраузерным и, как его добавить на сайт, об этом я уже писал в статье про кроссбраузерность шрифта.
Сегодня только поделюсь еще двумя ресурсами, которые я нашел в сети. Они лишены недостатков, которыми обладает Fontsquirrel, а недостатки его такие:

  • Закрашиваются мелкие детали;
  • Смещение базовой линии;
  • В последнее время часто стал отказывать в конвертации, т. к. шрифт в его черном списке.

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

Сервисы для конвертации шрифтов.

Собственно вот те конвертеры шрифтов, которыми я хотел поделиться:

  1.  font-face generator
  2.  freefontconverter

Оба они очень просты в использовании. Это одновременно и плюс и минус т.к. нет возможности настроить шрифт под свои нужды, например оставить только те символы, которые вы будете использовать, тем самым сократив вес файлов шрифта.
Можно отметить преимущество второго ресурса –он поддерживает достаточно много расширений(pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin, suit and bdf), которые можно подать на конвертацию.
Плюс первого ресурса – он, как и Fontsquirrel на выходе выдает удобный архив со всеми популярными форматами(.woff, .svg, .eot, .ttf, .woff2) и файл css с примером как подключить эти форматы через @font-face.

Как добавить шрифт на сайт.

Чтобы добавить возможность использовать новый шрифт, вам нужно добавить в ваши стили (файл .css) правило@font-face . Покажу на своем примере. Я воспользовался сервисом font-face generator и конвертировал шрифт Century Gothic Regular.ttf . В результате получил архив с шрифтом в различных форматах, которые будут помогут отображать правильно во всех браузерах. Также в архиве есть файл .css в котором прописано это правило @font-face. В файле уже все названия проставлены. Его содержимое:

@font-face {
font-family: 'CenturyGothicRegular';
src: url('centurygothic.eot');
src: url('centurygothic.eot') format('embedded-opentype'),
url('centurygothic.woff2') format('woff2'),
url('centurygothic.woff') format('woff'),
url('centurygothic.ttf') format('truetype'),
url('centurygothic.svg#CenturyGothicRegular') format('svg');
}


Если файл .css , где вы прописали @font-face и все файлы(все форматы шрифта) вы поместили в одну папку, то он уже будет работать. И например задав в стилях:

p {
    font-family: CenturyGothicRegular, helvetica,sans-serif;
}

Ко всем абзацам должно применяться правило и соответственно его шрифтом будет Century Gothic Regular.
Если файл стилей и файлы шрифтов лежат в разных папках, то нужно изменить путь к файлам в конструкции @font-face.

Рекомендуем к прочтению



Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.