Почему не работает шрифт в браузере
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в <head> ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2 , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.
После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты.
Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
- auto — поведение по умолчанию, зависит от браузера.
- block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
- swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
- fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
- optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload :
Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в <head> при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
Подключение шрифтов — часть вёрстки
А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.
Почему не отображаются шрифты?
Проблема с отображением может возникнуть, если при редактировании блока вручную назначили другой шрифт. Поэтому в блоке сбрасываются настройки и устанавливается шрифт по умолчанию.
Убедитесь, что вы указали корректное название шрифта в настройках сайта.
Название шрифта (font-family) должно совпадать с данными из CSS-файла: настройки сайта → раздел «Шрифты и цвета» → вкладка «Загрузить шрифт».
Важно: при подключении шрифта через CSS-файл нужно удостовериться, что сервер, с которого подключается шрифт, поддерживает Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *). Как установить эту настройку на сервере, указано в инструкции для подключения своего файла CSS При добавлении шрифта также важно, чтобы название шрифта в настройках сайта совпадало с названием шрифта в Google Fonts. Помимо этого обязательно проверьте ссылку на CSS-файл Google Fonts, она должна выглядеть так: В первую очередь необходимо проверить указан ли шрифт в шрифтовой паре. Важно чтобы у шрифта было прописано полное официальное название, и оно совпадало с названием, добавляемого шрифта.Если шрифт корректно отображается на латинице, но на кириллице возникают проблемы, то в первую очередь стоит проверить, поддерживает ли он кириллические символы. Эту информацию можно проверить на стороне сервиса, в котором вы приобрели шрифт.
Также при конвертации некоторые сервисы могут портить кириллическую версию. Это можно проверить в сервисе FontDrop!. Для конвертирования рекомендуем воспользоваться WOFFer.
Проблема с базовыми шрифтами может наблюдаться на экспортированных проектах.
На Тильде часть шрифтов берется из библиотеки сервиса Rentafont, который предоставляет шрифты по партнерскому соглашению.
- Futura PT
- Opinion Pro
- Circe (и Circe Rounded)
- Iskra
- Orchidea Pro
- Kazimir Text
- Mediator (и Mediator Serif)
- Reforma Grotesk
Чтобы файл шрифта загрузился, требуется время. На скорость загрузки влияет качество используемого интернет-подключения и количество контента на странице сайта.
Чтобы страница не тормозила и посетитель не ждал, сначала загружается самое важное — контент, а потом вспомогательные компоненты. Поэтому вы можете видеть системные шрифты до того, как загрузился ваш шрифт.
Воспользуйтесь блоком «Эффект загрузки страницы» (Т228, категория «Другое»). Он замедлит появление контента и текст будет отображаться с загруженными шрифтами.
Если в html такой код спокойно работает, то в dle такой код не работает, и не работают шрифты.
Оценить 1 комментарий
АА, у меня была такая проблема, кинб сами шрифты в папку css ну или где у тебя главные стили сайта лижат) а после экспириментируй, либо
src: url(../fonts/OpenSans-Regular.ttf);
src: url(./fonts/OpenSans-Regular.ttf);
src: url(fonts/OpenSans-Regular.ttf);
Попробуйте конвертировать ваш скрипт здесь, у вас подключается только ttf шрифт он сработает не во всех браузерах; хороший пример подключения шрифта
так же проверьте что бы пути к файлам шрифтов были правильными
а шрифт кириллический?
Ошибок нет , все должно работать.Как говорится - какой вопрос - такой и ответ.
Захочется более результативного ответа - напишите немного подробностей, а желательно адрес где не работает , А ЕЩЕ ЖЕЛАТЕЛЬНЕЕ НЕ ЗАДАВАТЬ ПОДОБНЫЕ ВОПРОСЫ, ГДЕ ТРЕБУЮТСЯ ЭКСТРАСЕНСЫ , ТУТ ИХ НЕТ! Javier Nazari: а шрифты лежат в папку /templates/default/fonts/ ?если нет, то перенесите их туда и попробуйте
Глупый ответ
Подключайте гугловские шрифты
Например у меня для CMS Joomla путь к шрифту указан так: url(/templates/имя папки с шаблоном/css/fonts/шрифт.TTF). У меня была подобная ситуация, проблема оказалась в том, что в linux регистр символов имеет значение, а у меня названия папок были в больших букв.
В общем у меня джумла после одновления видими перестала подгружать шрифт таким способом
url('/templates/.мой шаблон/fonts/cassandra.ttf');
тогда попробовав загрузить его по пути получил отказ joomlы и ошибку 404. Понял что перенаправление.
Открыл .htaccess и добавил туда в эту строку ttf
RewriteRule !(js|ico|gif|jpg|png|ttf) index.php [QSA,L] которая гооврит о том, чтоб перенапрявлять все страницы, ссылкающиеся на любые расширения кроме указанных, на index.php
В общем вуаля, все работает. Заходите на мой сайт и заказывайте работы по песочной аннимации!)))
Заходите на мой сайт и заказывайте работы по песоч.
Не работают подключенные стили ( CSS )
При верстке макета столкнулся со следующей проблемой: не работают подключенные стили к.
Не работают шрифты
Есть шрыфт. Для него есть 4 версии: regular, italic, bolditalic, bold. Вот код: .
не работают русские шрифты в браузере
не работают русские шрифты в браузере.
Не работают подключенные библиотеки
друзья такая беда, не знал в какую тему написать: Подключены две библиотеки: <script.
Попробуйте относительный путь font/BANGKOK.ttf . ну как бы это все делается на виртуальном сервере(xampp).
При относительных путях Как видно он пытается найти файл шрифта в папке со стилями, и ничего не находит, ну собственно это и логично
ну люди, Вы чего? Внимательней бы читали хоть, что ли.
Браузер не ругается что шрифт не может найти, он почему то его просто не желает отображать
Браузер шрифт не может найти, потому как начинает искать в папке со стилями
Опять же браузер не может шрифт найти, так как путь выходит из корневой директории сайта
Добавлено через 3 минуты
какие еще у кого идеи есть? почему шрифт может не отображаться на сайте?
Ooooopsss!
Не заметил, что в корне папка, привык к `assets` и `static`.
Насколько я знаю, имя в font-family должно иметь название шрифта, а не имя файла. Проверьте этот момент, как-то давно попался с этим.
А еще попробуйте генератор font-face: Клац или Клац
Насколько я знаю, имя в font-family должно иметь название шрифта, а не имя файлаНет, имя в font-family может быть любое. Вы просто сами задаете его для дальнейшего его использования.
nikolc, может браузер формат не поддерживает? Хотя ttf самый поддерживаемый формат вроде как. Странно вообще, почему не работает.
Добавлено через 3 минуты
nikolc, в каком браузере запускаете? ни в ие случаем?
Добавлено через 1 час 52 минуты
nikolc, ксати, попробуйте подключить другой шрифт тоже в формате .ttf и посмотрите, будет ли работать. Быть может файл шрифта "битый", кто его знает.
Добавлено через 2 минуты
Или если решили проблему уже, то будте добры, отпишитесь как решили, самому интересно просто
Еще если проверяете на русском тексте, а в шрифте такового нету, то тоже ничего не увидите. xZooYx, Suby, MathMath, В общем, подключается вообще два шрифта у меня
Видать шрифты действительно битые были, заменил и картина немного изменилась.
В хроме:
BANGKOK не работает
Izhitsa работает
В мозиле
BANGKOK не работает
Izhitsa не работает
В опере
BANGKOK работает
Izhitsa работает
Теперь у кого какие идеи? у самого в первый раз такая ерунда из-за шрифтов
nikolc, хм, сам первый раз вижу такую проблему. Шрифты вообще откуда брали/качали? Может есть смысл заново перекачать? Попробуйте еще раз.Добавлено через 2 минуты
И еще кстати кеш в браузере попробуйте очистить, может он в кеше уже лежат, битые.
Как Вариант конечно использовать Cufon, но из за некоторых особенностей работы Cufon мне не подходит.
nikolc, если не трудно, выложите скриншот с этими шрифтами в браузере где они работают и напишите оригинальное название шрифтов.Добавлено через 8 минут
Скачал сейчас такой же шрифт с другого ресурса, вес файла почему-то оказался на пару кб меньше. Толку ноль, ведет себя так же как и предыдущий.
Добавлено через 52 секунды
Вот вам и ttf.
Подключенные jquery-ui не работают в MVC
Всем привет! Подключила скрипты jquery-ui в MVC 3, но они не работают. Какие могут быть причины.
Не работают колонки, подключенные к ASRock H61DE
Вечер добрый. Вот такая материнка Вставил в 1 разъем наушники в другой колонки, во вторых.
Два модема, подключенные в одну сеть не работают
Имеется небольшая сеть, которой раздает корпоративную связь модем 1. Есть модем 2, который раздает.
Не работают скрипты подключенные через php | include | BISTRO
После подключения Scripts.php не работают сами скрипты, что делать? Подключено в самом низу.
Читайте также: