Как подключить шрифт через внешний файл CSS
Для подключения файлов через собственный CSS требуется опыт написания CSS кода и собственный сервер для хранения файла.
В первую очередь вам нужны файлы шрифта в формате WOFF
Получить их можно, купив шрифт, например, на myfonts.com. При покупке выбирайте лицензию «WEB» — для использования в интернете.
Разместите шрифтовые файлы в интернете
Для размещения файлов вы можете выбрать любой сервер или CDN-сервис. Главное, чтобы сервер поддерживал Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *)
Если вы размещаете файлы на своем сервере
Создайте в корне сайта файл .htaccess и пропишите этот код:
Header set Access-Control-Allow-Origin "*"
Создайте свой 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;
>
Подробности написания CSS
Цифры 300,400. в свойстве font-weight означают насыщенность начертания шрифта. Вот полный список:
300 — light
400 — normal
500 — medium
600 — semibold
700 — bold
Браузеры в интернете рендерят шрифт немного по-другому, чем он может выглядеть, скажем, в фотошопе. Обычно получается чуть жирнее. Иногда полезно знать о небольшой хитрости: можно указать, например, файл Light начертания для normal.
И наоборот. Если у вас нет файла с начертанием semi-bold (600). То укажите вместо него файл Bold. Таким образом полужирные заголовки будут отображаться не базовым начертанием для текста, а жирным.
Если файл шрифта у вас всего один, то можете указать его вообще для всех начертаний, перечислив их через запятую: 300,400,500,600,700
Вернитесь в Тильду. Настройки сайта → Шрифты и цвета → Загрузить шрифт → CSS файл. Поставьте ссылку на CSS файл (не на шрифты). Пропишите название шрифта так, как вы указали его в CSS файле.