Как сделать шрифт на сайте?
Николай, Уфа 1,3 тыс. просм.
Здравствуйте! У компании есть фирменный шрифт, хочу использовать его на новом сайте вместо стандартного системного. Не совсем понимаю, как это технически делается и есть ли какие-то ограничения по использованию шрифтов в интернете.
Елена Захарова UI/UX-дизайнер
ответил
Шрифт на сайте подключается правилом @font-face в CSS: файл шрифта, обычно формата woff2, загружается на сервер вместе с сайтом или берётся из внешнего каталога вроде Google Fonts, а браузер подгружает его при открытии страницы. Фирменный шрифт компании использовать можно, но только если его лицензия отдельно разрешает веб-встраивание - обычная лицензия для печати этого не покрывает.
Лицензию на веб-использование обычно продаёт сам разработчик шрифта или посредник вроде MyFonts, цена зависит от охвата трафика сайта. Если у фирменного шрифта нет такой лицензии, стоит подобрать похожий по характеру шрифт из бесплатных - например через Google Fonts, там огромный выбор с открытой лицензией и поддержкой кириллицы.
Технически лучше не подключать сторонний домен шрифта напрямую, а скачать файлы и разместить их на своём сервере: это убирает лишний внешний запрос и заметно ускоряет загрузку страницы, особенно на мобильном интернете. На сайт обычно ставят не больше двух шрифтов - один для заголовков, второй для основного текста, и обязательно указывают запасной системный шрифт в CSS на случай, если основной не загрузится.
Проверьте, что в файле шрифта есть кириллица и характерные для языка символы вроде тире и рубля - не все зарубежные шрифты их поддерживают, и тогда браузер молча подставит системный шрифт вместо них. Если сайт делает студия, вопрос лицензии и подключения обычно берёт на себя дизайнер или верстальщик - вам нужно только передать файл фирменного шрифта и подтверждение прав на него.
Задать свой вопрос
Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.
Вопрос отправлен на модерацию. После проверки он появится на сайте вместе с ответом.
Вопрос не отправлен: нужно подтвердить согласие на обработку персональных данных.