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