Вероятно для многих начинающих верстальщиков является актуальной проблема подключения шрифтов. В свое время я сам не раз спотыкался на этом, казалось бы, простом этапе. Именно для вас я подготовил эту статью и видео на Youtube, чтобы дать четкий ответ на вопрос «Почему шрифт не подгружается на сайте».
Да, как бы глупо это не звучало, часто проблема кроется в забывчивости и невнимательности. Подключение шрифтов часто — первый этап, за который берутся при разработке сайта. Увлекшись написанием стилей, мы можем забыть подключить их к html, а в силу банальности ошибки, она приходит нам в голову не сразу. Для этого я вынес эту проблему в первый пункт, чтобы вы сразу убедились в корректности подключенного css файла. На всякий случай, оставлю пример подключения файла style.css:
<link rel="stylesheet" href="/css/style.css">На моей памяти было пару раз, когда я указывал неверный путь до файла, или совершал опечатку в названии папки/файла шрифта, тем самым вызвав ошибку 404 и проблему с загрузкой шрифта на сайте. Данную ошибку очень легко отследить, достаточно зайти в консоль разработчика и посмотреть, нет ли файлов, которые сервер отдает с ошибкой 404. Если вы видите что-то типо:
style.css GET https://domain.ru/путь-до-файла/Manrope-Regular.ttf net::ERR_ABORTED 404 (Not Found)То почти наверняка вы допустили ошибку в указании пути до файла шрифта.
Проверка: проверьте расположение папки со шрифтами в вашей структуре сайта. Точно ли вы используется нужный путь? Приведу примеры с url и путями к файлу:
url("../fonts/Manrope-Regular.ttf")
url("/fonts/Manrope-Regular.ttf")
url("fonts/Manrope-Regular.ttf")
Если вы ловите ошибку 404, но путь до шрифта вы указали верно, то сравните название файла шрифта в папке и название файла шрифта в css. Вероятно вы просто неверно указали название самого файла. Запомните — Manrope-Regular и manrope-regular — не одно и тоже! Для лучшей надежности просто скопируйте название файла и вставьте его в css.
Сразу к делу — так выглядит 100% правильный вариант подключения шрифта в CSS:
@font-face{
font-family:'Inter';
src:
url('/assets/fonts/Inter.woff2') format('woff2'),
url('/assets/fonts/Inter.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
Тут мы сразу подключаем woff и woff2, потому что IE 11 не поддерживает самый современный формат.
Вот тут самая не очевидная проблема — это когда вы указываете до файла полный путь в url, например «http://domain.ru/fonts/Manrope-Regular.ttf», и вроде бы все точно указали — нет ошибок в написании шрифта, и в css @font-face указан корректно, но вы ловите ошибку Mixed content в консоли и шрифты не грузятся.
Причина этой проблемы заключается в том, что ваш сайт скорее всего работает по протоколу https, т.е. по пакеты информации передаются по защищенному каналу, и тут же вы хотите получить шрифт обход этого канала, на что браузер просто не грузит этот файл со шрифтом.
Выход банальный — просто меняем http на https, и вы сразу избавитесь от этой ошибки и подгрузите шрифт.