Как подключить шрифт через внешний файл CSS
Для начала хочется сказать, что это совсем просто и не так страшно, как кажется на первый взгляд. Требуется около 15 минут.
В первую очередь вам нужны файлы шрифта в формате WOFF
Получить их можно, купив шрифт например на myfonts.com. При покупке выбирайте лицензию "WEB" - для использования в интернете.

Разместите шрифтовые файлы в интернете
Для размещения файлов вы можете выбрать любой сервер или CDN-сервис. Главное, чтобы сервер поддерживал Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *)
Если вы размещаете файлы на своем сервере
Создайте в корне сайта файл .htaccess и пропишите этот код:

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Создайте свой CSS-файл и так же разместите его на сервере
Пример 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;
}
Цифры 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

Ок, осталось всего чуть-чуть. Открыть Тильду и прописать адрес вашего css-файла и название font-family шрифта.

Откройте Настройки сайта > Шрифты и цвета > Your own font и укажите ссылку на свой CSS файл
Ниже укажите название семейства шрифта (font family name), который вы указали в CSS-файле
ВАЖНО: Свой шрифт вы увидите только, когда опубликуете проект. В режиме редактирования и предпросмотра страницы, внешний css-файл не подключается, а это значит, что не будет виден ваш шрифт (это сделано из-за соображений безопасности).
Проблема: «На половине сайта не отображаются нужные мне шрифты».

Причины:
— Шрифт жестко задан при форматировании текста в блоке через редактор
— Проблема с форматом файла вашего шрифта
— Не верно прописано font-family name шрифта
— Не верно указан путь к шрифтам в css файле
— Не опубликована страница после изменения настроек

Варианты решения:
— Откройте ваш проект, найдите блоки в которых отображается не тот шрифт, выделите текст, нажмите в появившемся сверху меню на пункт выбора шрифта (большая буква A), сбросьте настройки стиля и опубликуйте проект заново.
— Попробуйте использовать ttf или woff, вместо otf формата.
— Проверьте в настройках проекта правильность имени font-family
— Попробуйте опубликовать сайт после изменения настроек.
Made on
Tilda