Справочный центр
Как подключить шрифт через внешний файл CSS
Для подключения шрифтов через CSS нужен опыт работы с CSS-кодом и свой сервер для хранения файлов.
Подготовьте и разместите шрифт в интернете
Файлы можно получить после покупки шрифта, например на myfonts.com. При покупке выбирайте лицензию WEB — она подходит для использования шрифта на сайте. Далее, загрузите файлы на собственный сервер или в CDN-сервис. Важно, чтобы сервер поддерживал CORS-заголовок для раздачи файлов на любые домены: Access-Control-Allow-Origin: *
Если вы размещаете файлы на своем сервере, cоздайте в корне сайта файл. htaccess и добавьте в него код для настройки CORS:
Если вы размещаете файлы на своем сервере, cоздайте в корне сайта файл. htaccess и добавьте в него код для настройки CORS:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>Создайте CSS-файл
Создайте отдельный CSS-файл и разместите его на своем сервере или в CDN-сервисе. В этом файле нужно прописать подключение шрифта через правило @font-face.
CSS-файл можно создать в обычном текстовом редакторе: напишите код, сохраните файл с расширением .css, а затем загрузите его на сервер или в CDN. Пример написания CSS-кода:
CSS-файл можно создать в обычном текстовом редакторе: напишите код, сохраните файл с расширением .css, а затем загрузите его на сервер или в CDN. Пример написания CSS-кода:
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}Особенности написания CSS
Цифры в свойстве font-weight обозначают насыщенность начертания шрифта:
Браузеры могут отображать шрифт немного иначе, чем графические редакторы, например Photoshop. Часто шрифт на сайте выглядит чуть плотнее. В таких случаях можно использовать более легкое начертание для обычного текста, например файл Light для значения normal.
Если у вас нет файла с начертанием semibold, можно использовать вместо него файл Bold и указать нужное значение font-weight:
- 300 — light;
- 400 — normal;
- 500 — medium;
- 600 — semibold;
- 700 — bold.
Браузеры могут отображать шрифт немного иначе, чем графические редакторы, например Photoshop. Часто шрифт на сайте выглядит чуть плотнее. В таких случаях можно использовать более легкое начертание для обычного текста, например файл Light для значения normal.
Если у вас нет файла с начертанием semibold, можно использовать вместо него файл Bold и указать нужное значение font-weight:
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 600; font-style: normal;
}Если у вас только один файл шрифта, его можно указать для нескольких начертаний сразу:
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Regular.woff')
format('woff');
font-weight: 300, 400, 500, 600, 700; font-style: normal;
}Добавьте CSS-файл на Тильду
Вернитесь в Тильду и перейдите в «Настройки сайта» → «Шрифты» → «Загрузить шрифт» → «CSS-файл». Вставьте ссылку именно на CSS-файл, а не на файлы шрифта. Затем укажите название шрифта так же, как оно прописано в CSS-файле в свойстве font-family.
Сохраните и переопубликуйте все страницы.
Важно: свой шрифт появится только после публикации проекта. В режиме редактирования и предпросмотра внешний CSS-файл не подключается из соображений безопасности, поэтому шрифт может не отображаться.
