Html — Web. Подключение шрифтов. Проблема с отображением на сайте.


Содержание

Настройте показ всего текста во время загрузки веб-шрифтов

Настройте показ всего текста во время загрузки веб-шрифтов — так звучит рекомендация от Google PageSpeed Insights. Рассмотрим, как это реализовать

1. Подключаем шрифт инлайново в теге head в формате

2. Используем шрифт в формате

В случае с font-display: swap; — обязательно нужно прописывать шрифт на фоллбэк. Так как при значении swap (что в переводе с английского замена, обмен) браузер будет отображать другой шрифт, пока наш основной шрифт не будет загружен полностью.

Собственно, и всё.

Если font-display у вас не работает, возможно вы подключили шрифт в файле CSS, а не в HTML

Но даже такую последовательность действий PageSpeed иногда игнорирует.

Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

Этот небольшой кусочек кода означает, что ко всем тегам

применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии.

Веб-шрифты

Вышеприведенный способ использования шрифтов имеет огромный минус – вы ограничены в количестве шрифтов. Вам придется довольствоваться лишь теми их вариантами, которые, вероятнее всего, установлены на большинстве компьютеров.

Каким же образом можно увеличить выбор шрифтов, чтобы сделать дизайн страницы индивидуальным, добавить оригинальности? На помощь приходят веб-шрифты. Читайте главу дальше и вы узнаете, как с ними работать.

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Формат файла шрифта Какие браузеры поддерживают
TTF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT Поддерживает только Internet Explorer
WOFF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com. В строку поиска необходимо ввести название формата (например, ttf).

Если вы ориентируетесь на современные браузеры, вам достаточно будет использовать формат шрифта TTF – наиболее распространенный и используемый. В случае, когда вам необходимо иметь несколько форматов одного шрифта, вы можете воспользоваться специальными онлайн-конвертерами из одного формата в другой, а затем подключить все файлы по очереди. Таким образом браузер сможет выбрать тот формат шрифта, с которым он работает.

Подключаем веб-шрифт с помощью @font-face

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

Далее нам необходимо дать команду браузеру загрузить шрифт MyUniqueFont . Записывается это с помощью директивы @font-face следующим образом:

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

Скриншот: интерфейс сервиса Google Fonts

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts. На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

Первым делом на странице выбранного шрифта отобразятся варианты его начертания, а также иконка спидометра, которая означает не что иное, как скорость загрузки шрифта. Чем больше стилей для шрифта вы выбираете, тем больше времени потребуется на его загрузку. Поэтому рекомендуется выбирать только те варианты начертания, которые планируется использовать.

Шаг 2: выберите алфавит

Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.

Шаг 3: добавьте код на сайт

Далее Google предлагает подключить шрифт одним из нескольких способов: или стандартным, или через директиву @import , или с помощью JavaScript. Мы рассмотрим первые два варианта.

Первый способ подразумевает добавление в HTML-код ссылки на сервер Google, откуда и скачивается шрифт. Вам необходимо скопировать уже готовый кусок кода и поместить его между тегами в вашем HTML-документе. Пример:

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

Особенность первого способа заключается в том, что вам понадобится добавлять ссылку на шрифт в заголовок каждой страницы, где планируется его использовать. Это легко осуществить на сайтах с небольшим количеством страниц, но проблематично для крупных ресурсов. Второй способ удобен тем, что код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, к которым подключена эта таблица, получат необходимый шрифт, который будет загружаться с помощью директивы @import .

Скриншот: этапы настройки шрифта Google

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

  • легкость использования (разобраться с сервисом сможет даже новичок, а весь необходимый код генерируется автоматически – остается только скопировать его);
  • доступность шрифтов (нет необходимости за них платить);
  • предусмотрены все используемые форматы шрифтов (это означает, что каждый браузер сможет загрузить именно тот формат шрифта, с которым он работает).

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

Сегодня нам доступно несколько вариантов подключения оригинальных и нестандартных шрифтов к веб-страницам. Каждый из этих способов имеет свои плюсы и минусы. Какой из вариантов лучше использовать, вам нужно определить самостоятельно. Зачастую это зависит от ситуации, и в разных случаях могут пригодиться разные подходы. На данном этапе вам достаточно просто знать способы использования шрифтов в CSS.

Как подключить шрифт на сайт в CSS

Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:

В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;

В самом низу файла стилей style.css прописываем правило:

А также в файле стилей задаём правило для всех заголовков:

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

Если вы хотите подключить несколько шрифтов или их начертаний, то просто добавьте их под предыдущим:

Вы могли заметить, что есть разные форматы шрифтов — .ttf, .woff, .eot, .svg и другие. Еще существует формат для современных браузеров .woff2, но о нем мы расскажем в одной из следующих статей.

Обычно каждый шрифт подключается сразу в 3-х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в том числе и старых. Выглядит это так:

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них.

Как подключить шрифт с помощью различных сервисов

Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

  1. Находим нужный шрифт или выбираем из уже имеющихся;
  2. Скачиваем архив и добавляем его в папку fonts;
  3. Копируем уже готовый CSS-код для файла style.css;

Самый простой способ подключения шрифтов

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт или несколько:
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле:
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег head:


Как подключить шрифт к шаблону Moguta.CMS

  1. Через хостинг загрузить необходимый шрифт в папку /mg-templates/mg-default/fonts;
  2. Через административную панель открыть файл стилей;
  3. Прописать в самом верху новый шрифт;
  4. Ниже в файле стилей найти интересующий нас элемент и задать или изменить свойство font-family: *название нового шрифта* ;

Как добавить ссылку с Google Fonts в шаблон Moguta CMS

  1. Заходим Настройки—>Шаблон—>template.php;
  2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
  3. Затем в файле стилей задаём новый шрифт к нужному элементу:

Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях.

Как на сайте WordPress оптимизировать веб-шрифты?

Веб-шрифты являются основным элементом современного веб-дизайна и используются подавляющим большинством веб-сайтов, построенных на WordPress. Оптимизация использования и доставки веб-шрифтов на сайтах имеет решающее значение, поскольку плохо оптимизированные веб-шрифты могут привести к снижению производительности всего веб-сайта в целом.

Веб-шрифты довольно широко используются дизайнерами по всему миру. И это неспроста, ведь они часто оказываются более эффективными, чем веб-безопасные (web safe) шрифты, обеспечивая более широкий диапазон размеров и разрешений устройств.

Что такое веб-шрифты?

Вообще на сайтах используется два типа шрифтов:

Веб-безопасные. Это шрифты, которые уже предварительно установлены на устройстве. Среди них: Arial, Times New Roman и Courier New, а также типовые семейства шрифтов (serif, sans-serif и monospace).

Веб-шрифты. Это шрифты, которые не были предварительно установлены на устройстве и должны быть загружены браузером пользователя перед отображением. В результате для сайтов, использующих веб-шрифты, их владельцы должны думать о влиянии дополнительных ресурсов шрифта на общую скорость загрузки сайта.

Размещение и доставка шрифтов

После того, как Вы решили использовать веб-шрифты, нужно решить, откуда их доставлять. Для этого существуют два варианта:

Размещение на своем сайте (локально). В итоге файлы шрифтов размещаются на сервере хостинга вместе с остальными файлами веб-сайта.

Сторонние ресурсы. В таком случае шрифты размещаются на сторонних ресурсах (например, в таких популярных службах шрифтов, как Google Fonts или Typekit ).

Сторонние службы размещения шрифтов являются довольно популярными среди веб-дизайнеров. Тем не менее, некоторые разработчики предпочитают избегать использования таких ресурсов по соображениям производительности или безопасности. Понятно, что в этом случае локальное размещение является идеальным вариантом.

Вполне резонно использовать те же Google Fonts или Typekit в ряде нескольких причин:

  • не очень быстрый хостинг;
  • отсутствие навыков веб-разработки.

Как в WordPress оптимизировать веб-шрифты?

Оптимизация веб-шрифтов является сложной темой, и существует множество различных способов оптимизации доставки шрифтов. Вариант, который подходит Вашему веб-сайту лучше всего, зависит от множества факторов, включая скорость сервера хостинга и сети, размер CSS-файлов сайта, а также технические возможности владельца сайта.

Оптимизация сервисов доставки веб-шрифтов

Начнем пожалуй с этого метода, который является наиболее популярным, быстрым и простым. Следует отметить, что Typekit хоть и довольно популярен среди профессиональных разработчиков, но Google Fonts все же пользуются чаще. Он бесплатный и настолько популярен, что многим пользователям не нужно загружать много ресурсов шрифтов Google, поскольку они уже хранятся в кеше браузера.

Добавить Google-шрифты на сайт WordPress довольно просто. Самым простым методом для этого является подключение шрифтов непосредственно в шапку Вашего сайта с помощью директивы wp_enqueue_script() в основном конфигурационном файле functions.php Вашей активной темы. Если шрифт был добавлен, нужно его подключить также в CSS-файле (например, style.css в папке темы).

В этом случае следует иметь в виду, что в таком случае нужно будет использовать дочернюю тему, так как будут изменяться сами файлы темы. В противном случае Вы потеряете все свои изменения при следующем обновлении темы.

Если Вы не хотите или не умеете вручную править файлы темы WordPress, то специально для этого существуют плагины, которые возьмут всю работу на себя, автоматически добавив шрифты на Ваш сайт.

Плагин Easy Google Fonts

Бесплатный плагин Easy Google Fonts позволит легко настроить стили шрифтов для каждого текстового элемента.

Оптимизация Google Fonts

Все шрифты онлайн-сервиса Google Fonts сжимаются и передаются, используя технологию CDN от Google, что гарантирует в итоге самую быструю доставку. Несмотря на то, что Google Fonts действительно включает эти встроенные методы оптимизации, все равно стоит сделать все возможное, чтобы ускорить доставку и отображение шрифтов на сайте. Для этого существует несколько рекомендаций.

Цукерберг рекомендует:  Зачем фреймворки веб-разработчику

При выборе шрифтов в Google Fonts не стоит выбирать все доступные стили и наборы символов. Добавьте только те стили и наборы символов, которые Вам действительно понадобятся. Тут не обязательно включать все варианты курсива и жирного начертания – браузеры сами откорректируют их правильное отображение.

Можно заметить, что многие сайты используют уникальный шрифт для отображения заголовка сайта. Однако для этого Вам нужно будет добавить дополнительный файл шрифта, который будет загружаться. Для ускорения следует минимизировать воздействие этого дополнительного стиля шрифта путем загрузки только определенных символов, используемых в Вашем заголовке. Это можно сделать, добавив специальный параметр text с необходимыми буквами в конец Google Fonts URL.

К примеру, отобразим слово WPShop, используя шрифт Bungee Shade. В этом случае ссылка будет иметь следующий вид:

В итоге Google Fonts CDN будет доставлять только указанные символы.

Шрифты, размещенные локально

Локально размещенные файлы шрифтов является наиболее приемлемым вариантом, если Ваш хостинг обеспечивает хорошую скорость, и Вы не хотите быть зависимым от внешних сервисов.

Разместить шрифт самостоятельно довольно просто:

  • загрузить файл шрифтов на свой сайт;
  • добавить правило @font-face в файл style.css Вашей темы для каждого загруженного шрифта;
  • примените шрифты, используя пользовательский CSS.

Есть еще более простой вариант – использовать бесплатный плагин Use Any Font . Он позволит загружать шрифты и назначать их элементам HTML прямо с панели инструментов WordPress. Отметим, что бесплатная версия плагина позволит загрузить лишь один файл шрифта.

Оптимизация локальных шрифтов

При использовании локальных шрифтов нередко допускаются ошибки, ведущие к ухудшению скорости загрузки вашего сайта. Чтобы их избежать, следует придерживаться ряда несложных правил.

Во-первых, все ресурсы шрифтов должны быть максимально сжатыми. Как уже было сказано, во время генерации шрифта следует включать только необходимые стили и наборы символов.

Во-вторых, все шрифты должны быть в четырех форматах: woff2, woff, ttf и eot. Их все необходимо включить в файл стилей с помощью правила @font-face. Это гарантирует, что браузеры выберут самый легкий и быстрый формат.

В-третьих, нужно рассмотреть возможность использования unicode-range для ограничения загруженных ресурсов шрифта только теми символами, которые Вы будете использовать.

Оптимизация веб-шрифтов с помощью CSS-встраивания

Если для Вас важна каждая миллисекунда в процессе загрузки страниц сайта, то оптимизация даже локально размещенных файлов шрифтов имеет место.

Основная идея – использовать кодировку base64 для встроенных шрифтов в таблицу стилей CSS. Это сокращает необходимость того, чтобы браузер посетителя загружал и обрабатывал ресурсы шрифтов, но это означает, что Ваш сайт отдает довольно большой CSS-файл. После загрузки шрифта последующие просмотры страниц, которые используют один и тот же ресурс, будут отображаться быстрее. В результате эта стратегия заслуживает внимания, если Ваш сайт довольно посещаем.

Кодирование загруженных локально файлов шрифтов в таблицу стилей CSS – это довольно просто. localFont – это простой в использовании веб-сервис, который Вы можете использовать для преобразования файлов woff, woff2 и ttf в CSS-стили. Инструмент также предоставляет специальный JS-скрипт, который будет проверять кэш браузера каждого пользователя на наличие CSS-шрифта перед его загрузкой во второй раз.

Еще один способ оптимизации шрифтов

Если Вы будете использовать встроенные CSS-шрифты, то на следующем этапе нужно рассматривать подключение CSS непосредственно в HTML-коде Вашего сайта. Это избавит от необходимости в обращениях к серверу для получения ресурсов шрифтов. Однако это также исключает возможность хранения ресурсов шрифта в кеше пользователя браузера, поскольку шрифты кодируются непосредственно в HTML-код сайта и включаются при каждой загрузке страницы.

Если Вы встраиваете CSS-шрифт непосредственно в HTML-код своего сайта, следует использовать исключительно одно семейство, один стиль и набор символов. Если для сайта необходимы дополнительные семейства шрифтов, стили и наборы символов, загрузите их отдельно.

Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон

Шрифты играют огромную роль в оформлении сайта. Один и тот же текст, написанный разными шрифтами может производить на человека прямо противоположные впечатления.

Одни шрифты выглядят более убедительно, другие — более интригующе.

Но как подключить любые шрифты к сайту и применять их где захочется?

В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.

Вы убедитесь, что в подключении шрифтов к сайту нет ничего сложного.

Если у вас сайт на Wordress, читайте способ №1, он — самый простой. Если вы разбираетесь в CSS — можете сразу перейти ко второму или третьему способу.

Способ №1. Быстрое подключение шрифтов к сайту на WordPress ( cложность: ⭐ ⭐ ⭐ )

Если на ваш сайт установлена премиальная тема оформления — вы можете подключить шрифты за 2 минуты.

Вы хотите изменить шрифт заголовков своих статей. Для этого:

1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один — «настройки темы».

2. Перейдите в раздел Typography (типография).

3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):


4. Нажмите на «Сохранить изменения».

Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.

Способ №2. Используйте всю силу Google Fonts ( cложность: ⭐ ⭐ ⭐ ⭐ )

Вы когда-нибудь слышали про Google Fonts? Если вкратце — это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.

Шаг 1. Перейдите на официальный сайта сервиса.

Шаг 2. Найдите в коллекции Гугл шрифтов те, которые вам подходят. В правом меню можно сузить круг задав язык, начертание и популярность шрифта:

Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.

Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку «+»:

Вы можете добавить любые шрифты нажимая на значок «+».

Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:

Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект — нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):

Но если вам нужно только жирное начертание (для заголовков), выберите только ее.

Помните, чем больше начертаний вы выберите, тем больше будет вес загружаемого файла.

Чтобы не замедлять скорость загрузки сайта выбирайте как можно меньше начертаний шрифта.

Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую «@import» и вставьте на первую строчку CSS файла вашего сайта:

Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/’вашатема’/css/. В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:

Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет ��

Так как сначала должны загрузиться шрифты, только потом все остальное — размещайте код подключения шрифта в самое начало CSS файла.

Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.

Для придания шрифта Roboto всем абзацам я напишу следующее: p

Способ №3. Кастомное подключение шрифтов с помощью CSS ( cложность: ⭐ ⭐ ⭐ ⭐ ⭐ )

Если вы достаточно квалифицированы, лучше всего самостоятельно подключить шрифты через CSS. В этом случае шрифты будут находится на вашем сервере в специальной папке. Но для начала нужно их где-то раздобыть.

Где взять веб-шрифты для сайта

А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?

Подключить шрифты с бесплатной лицензией. Проще всего найти их с помощью сервиса Fontsquirrel, что мы и сделаем.

Шаг 1. Перейдите на официальный сайт сервиса

Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.

Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.

Например, если есть 4 начертания, будет написано 4 Styles:

Обозначение начертаний шрифтов — нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).

Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.

Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.

Для подключения шрифтов используем @Font-face

Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.

  • Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
  • Файлы шрифтов будут находится на вашем сервере — вы не будете зависеть от сторонних сервисов.
  • Для правильного подключения шрифта для каждого начертания нужно прописывать отдельный код.
  • Не зная CSS можно легко запутаться.

Вы можете просто скопировать мой готовый код и где нужно указать свои значения.

Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.

Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.

Шаг 2. Пропишите в самом начале CSS файла следующую запись:

Где MyWebFont — это название шрифта, а значение свойства src (данные в скобках в кавычках) — их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.

Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.

Шаг 3. При подключении курсивного начертания, пропишите следующее:

Где все то же самое, только свойству font-style мы придали значение italic.

Шаг 4. Для подключения жирного начертания, добавьте следующий код:

Где свойству font-weight мы задали значение bold.

Не забудьте для каждого начертания указывать правильное расположение файлов шрифтов.

Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:

Ну вот и все :) Только что вы подключили 4 начертания шрифта на свой сайт.

Но есть одна ремарка — данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.

Как подключать шрифты для сайтов на разных CMS

Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) — если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.

Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам — поделитесь ею в социальных сетях.

[popup_trigger >Подписывайтесь на мою рассылку [/popup_trigger], чтобы не пропустить полезные и интересные публикации на блоге.

Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.

Правило @Font-Face и несколько уловок для работы с Web шрифтами

Возможность встраивания любых шрифтов, которые вам нравятся на веб-сайты посредством @font-face, является дополнительным стилистическим приёмом, который предназначен для устранения монотонности обычных системных шрифтов. Это, безусловно, было бы слишком просто и скудно, если бы все пользовались только одним шрифтом. В этой статье мы поговорим как раз об этом.

Это краткое введение в @font-face позволит вам вникнуть в тему интеграции шрифтов посредством @font-face. Если вы хотите использовать какие-то особенные шрифты, то как раз тут вы поймёте, как их интегрировать на вашем сервере. В этой статье мы попытаемся перечислить всевозможные полезны сведения, которые касаются данной темы.

Форматы Web шрифтов

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, и это далеко не всё. Наверное легче найти путь из джунглей, чем шрифт, который вам 100% подойдёт. Давайте взглянем на плюсы и минусы интеграции шрифтов.

TrueType

Этот формат был создан в далёком 1980 году в конкурсе Adobe’s Type 1 для PostScript. Этот формат, основанный на новых технологиях, заменил множество других, которые использовались к этому времени. Microsoft начал использовать формат TrueType, и вскоре он стал стандартным системным шрифтом.

OpenType

Когда-то давно Microsoft и Adobe объединились, чтобы создать данный формат. Как ни странно, но он основан на формате TrueType, но в него встроены дополнительные элементы, такие как лигатуры, контекстные символы и т.д. Однако многие браузеры до сих пор не поддерживают данный формат. Существует две разные версии формата OpenType, основанные на разных технологиях. Если поподробнее то вот:

  • OpenType с контурами TrueType (OpenType TT) и
  • OpenType с контурами PostScript (OpenType PS)

Шрифты, основанные на формате TrueType больше подходят для Web, и будет вообще клёво, если Microsoft решит все проблемы связанные с отображением. Структуры шрифтов TrueType и OpenType fonts очень схожи и поддерживаются в Safari 3.1 и выше, Firefox 3.5 и Opera 10 (и в новых версиях).

Internet Explorer поддерживает формат (EOT) начиная с 1990 года. В отличии от форматов TrueType и OpenType, он предоставляет следующие возможности:

  • Шрифты EOT более компактны, чем OpenType, что является значительным преимуществом для Web.
  • Шрифты EOT могут использоваться только в пределах домена. Это очень удобная вещь, т.к. помогает бороться за лицензированные права на шрифты.

Если вы хотите сконвертировать шрифт TTF в файл EOT, то можете воспользоваться инструментом EOTFast (бесплатный), доступный только для пользователей Windows.

В отличии от EOT, формат WOFF отрекомендован знакомой вам организацией W3C, которая опубликовала первую версию WOFF в июле 2010.

На самом деле формат WOFF это новое скрещивание форматов TrueType и OpenType, что по сути не делает его новым.

WOFF использует алгоритм, который называется zlib, что позволяет значительно уменьшить вес файла, примерно на 40%. Более того, в этот шрифт можно добавлять мета данные, такие как лицензию и т.д. Однако такие данные не могут валидироваться браузерами.


Данный формат поддерживается браузером Firefox, начиная с версии 3.6, и Google Chrome, начиная с версии 5.0. Все остальные браузеры на данный момент производят все необходимые изменения для поддержки данного формата.

SVG шрифты содержат символические знаки в качестве стандартных SVG элементов и атрибутов, и представлены в качестве векторных изображений. Но как ни странно, это одна из слабых сторон данного формата. В то время как EOT, WOFF, PostScript и OpenType могут быть сжаты, данная операция не может быть применена к шрифтам формата SVG.

SVG шрифты — это не очень хорошая альтернатива для Web шрифтов, и iOS 4.2 — это первая версия Mobile Safari, которая поддерживает данный формат. Однако, данный формат является единственным, который вы можете использовать для iPhone и iPad, которые работают на iOS 4.2.

Инструмент Font Squirrel, может быть использован для конвертирования из одного формата в другой.

@font-face Революция

Свойство CSS3 @font-face предоставляет множество новых возможностей для Web дизайнеров.

Что касается типографии, Web находится далеко позади печати. К примеру: в печати, более «сгущённые» шрифты часто применяются для того, чтобы уместить больше символов на одной строке. Системные коллекции шрифтов, как правило содержат «конденсированные шрифты». К тому же различные компании не могут использовать собственные шрифты на своих сайтах. Вместо этого им приходится заменять их на стандартные шрифты, такие как Arial, которые настолько приелись, что это уже невозможно.

@font-face В далёком 1990

Идея использования любых шрифтов в вебе не так уж и нова. Netscape 4 и Internet Explorer 4 поддерживали @font-face ещё в начале 1990 года. Данное правило позволяет загрузить нужный нам шрифт на сервер и использовать его на Web странице следующим образом:

Эта техника буквально взорвала всё сообщество. Многие люди начали ей пользоваться, но на самом деле появились проблемы с отображением. Вместо того, чтобы развивать Web типографию, разработчики стали использовать стандартные системные шрифты.

Сейчас уже никто и не припомнит, что поддержка @font-face была убрана из спецификации CSS 2.1. Стандартные шрифты на всю катушку использовались в Web дизайне. Многие разработчики начали создавать из текста изображение или помещали красивые заголовки в Flash, для того, чтобы отобразить текст оформленный красивым шрифтом.

Со временем многие разработчики начали использовать векторные элементы, которые создаются средствами JavaScript. Typeface.js и Cufón предоставляют данную функциональность. Каждая из этих техник не совместима с поисковой оптимизацией и масштабированием.

Вторая попытка

Запуск Safari 3.1 от Apple дал новый старт Web шрифтам. Правило @font-face было немного обновлено. Данное изменение было введено из-за внедрения LCD мониторов, которые имеют высокое разрешение.

На платформах Mac OS X, данная функциональность активирована по умолчанию. Пользователям Windows она доступна через ClearType, который поддерживается в Windows Vista и Windows 7, но не в Windows XP. В Microsoft Office 2007 и 2010, Internet Explorer 7+ и Windows Live Messenger, ClearType включён по умолчанию вне зависимости от операционной системы.

Используем шрифты следующим образом:

Возникшие проблемы

Тут оказалось не всё так просто на первый взгляд. В интернет сообществе началось множество дебатов посвящённых лицензиям и авторским правам. Из-за этого количество людей, использующих данную фичу, резко сократилось.

Использование @font face Kit Generator

Для практического тестирования, вы можете скачать пакет на Graublau Sans Web. Этот пакет шрифтов содержит шрифты OpenType, основанные на PostScript, которые поддерживаются в Safari 3.1+, Firefox 3.5+ и Opera 10+. Для того чтобы добиться такого же функционала в Internet Explorer и исправить все недочёты отображения, вы можете воспользоваться @font-face Kit Generator. Кликните на кнопку “Add Fonts” и загрузите шрифт, который хотите использовать. Затем выберите пункт “Expert” для проверки необходимых опций, о которых мы поговорим подробнее:

Форматы шрифтов

Вся проблема в том, что вам необходимо активировать поддержку EOT для работы @font-face в Internet Explorer IE4 — IE8 (в IE9 RC, WOFF уже поддерживается). Шрифты SVG вам понадобятся только для Mobile Safari, которое стоит на iPhone и iPad iOS 4.2. Chrome и Opera с этим форматом знакомы. В качестве альтернативы SVG, вы можете использовать сжатую версию SVGZ, которая занимает намного меньше места. Однако она не поддерживается на iPhone, так что вам по любому придётся работать с SVG.

Создание формата TrueType активирует поддержку в Safari (начиная с версии 3.1), Firefox (3.5) и Opera (10). В будущем WOFF грозится стать стандартным форматом для Web шрифтов.

Рендеринг и прочие параметры

  • Add Hinting: эта опция предназначена для улучшения отображения на Windows. Вы можете отключить её, если шрифты уже оптимизированы.
  • WebOnly™ добавляет специфические модификации, которые позволяют браузерам использовать данные шрифты, но исключают установку шрифтов на операционную систему. Выбор этого параметра предотвращает нарушение авторских прав.
  • Keep OT Features: шрифты OpenType могут хранить в себе ряд функций. Однако данные функции почти не поддерживаются современными браузерами.
  • Remove Kerning: эта ещё одна возможность уменьшить размер файла. В том случае, если вы будете использовать данный шрифт внутри тега body, очень рекомендую выбрать данную опцию.
  • Simplify Outlines: эта опция уменьшает качество отображения элементов шрифта.
  • Build Cufón File — это не традиционная часть внедрения @font-face.
Цукерберг рекомендует:  Html - создание сайта HTML_CSS

Дополнительные настройки

Дополнительные настройки предназначены для удаления всех лишних символов. Хотите того или нет, но тут всё зависит от шрифта, который вы выбрали. Некоторые шрифты могут содержать тысячи различных символов, которые никогда не будут использоваться.

Опция Basic Subsetting стоит по умолчанию для восточных Европейцев, которые используют шрифты основанные на MacRoman. Custom Subsetting позволяют пользователю определить, какие символы он будет использовать в файле. Если опция No Subsetting деактивирована, то шрифт просто сконвертируется в том виде, в котором он есть.

CSS-форматы

Вы можете выбрать три разные версии:

Fontspring syntax — это, возможно, самый простой вариант. Он может передать файл WOFF в IE9 и EOT в более раннюю версию IE. Он также будет работать на мобильных версиях браузеров и операционках, таких как iOS и Android.

CSS Опции

Для манипулирования шрифтами, вы также можете использовать следующие CSS свойства: font-weight и font-style.

Данная опция будет работать, если шрифт содержит все стили, такие как обычный, курсив, жирный и жирный с курсивом.

Последняя по списку, но не по значению, — опция Base64 Encode, которая позволяет шрифту быть закодированным согласно base64. В результате, шрифт не появится как файл в пользовательском кэше.

Пример кода

Данный код является примером использования CSS для внедрения @font-face:

Первые строки предназначены для браузеров IE9 и IE7 & IE8. А вот далее, EOT для Internet Explorer сопровождается вопросительным знаком. Это специальный приём применяется, чтобы сбить с толку IE для того, чтобы последующий текст он не принимал всерьёз.

Если вы обратили внимание, то некоторые подключения используют запись src для того, чтобы указать путь к файлу. SVG спецификация предоставляет специальный хэш тег для идентификационного номера. Это необходимо для файлов SVG, которые могут содержать несколько шрифтов. Однако @font-face generator может позаботиться о данных номерах и автоматически вставить их в CSS код.

Уменьшаем время загрузки страницы с большим количеством шрифтов

Благодаря использованию вышеперечисленных опций, вы можете сократить размер шрифта до 30-60 KB. Использование большого количества шрифтов на странице может привести к увеличению времени загрузки особенно для мобильных устройств.

Временное решение в Firefox

Большинство браузеров не отображают текст страницы до тех пор, пока шрифты полностью не импортированы. Однако Firefox отображает фон в обычном шрифте, потом снова его рендерит после того, как шрифт до конца загрузился. Зачастую данная техника приводит к нежелательному слайд эффекту. Web дизайнеры могут контролировать данный процесс благодаря Google Webfont Loader.

Встраивание шрифтов с вашего сервера

Для того чтобы использовать тот или иной шрифт в вашем дизайне, вам не обязательно иметь лицензию. Вы можете использовать уже лицензированные шрифты из ваших приложений и запихнуть их на ваш Web сервер.

Этому шрифту — да, этому — нет

Перед тем, как начать массово конвертировать обычные шрифты в веб шрифты, постарайтесь определить, можете ли вы это сделать согласно лицензионному соглашению. В общем случае, коммерческая лицензия не позволяет использовать шрифты из различных программ в каком-то другом месте. Таким образом, вы не сможете воспользоваться правилом @font-face.

В то же время, существует огромное количество шрифтов и сервисов специально для Web. Вы можете так же лицензировать свои собственные шрифты на сайте MyFonts.com.

Пока формат WOFF станет официальным стандартом, вы можете пользоваться данными техниками и сервисами, как многие другие разработчики.

Встраивание бесплатных шрифтов

К счастью, в интернете вы можете найти целую кучу бесплатных шрифтов, которые вы можете использовать для ваших сайтов. Список шрифтов, которые вы можете смело внедрить, можете найти на сайте webfonts.info.

Ещё одна огромнейшая коллекция находится на ресурсе Font Squirrel. Тут вы можете скачать целый набор шрифтов, которые в последствии необходимо будет сконвертировать благодаря @font-face Kit Generator.

Перед тем как скачать шрифт, убедитесь в том, что шрифт может быть сконвертирован для веба!

Советы и рекомендации

Сама идея использования различных шрифтов на веб страницах начала бурно развиваться последние два года. О таких темпах развития можно только мечтать. Однако до сих пор разработчикам приходится сталкивать с множеством проблем кроссбраузерного отображения. Все эти проблемы решатся, когда Web Open Font Format (WOFF) будет признан сообществом разработчиков как стандарт.

Другим препятствием, которое уже упоминалось ранее, является распространенность операционной системы Windows, в которой субпиксельный рендеринг отключен (либо по умолчанию в Windows XP или по предпочтению со стороны пользователя). По сравнению с системными шрифтами, большинство веб-шрифтов отображаются в низком качестве, из-за отсутствия субпиксельного рендеринга. Конечно же, со временем данная проблема будет решена, так как пользователи заменят старое оборудование и операционные системы. В то же время, Internet Explorer 9 работает с текстом процессором DirectWrite, что обеспечивает значительно более совершенную обработку.

Использование веб-шрифтов в вашем дизайне требует тщательного тестирования, так как на различных браузерах и платформах результат может быть прямо противоположный. Если экран имеет низкое разрешение, и отсутствует поддержка субпиксельного рендеринга, то отображение будет искажено или будет вовсе отсутствовать. Самый простой способ решения данной проблемы — это чтобы все сменили железо и операционки! Но этого же не будет) Конечно, вы можете использовать JavaScript, для того чтобы узнать о поддержке субпиксельного рендеринга.

Отображение текста

Даже если некоторые веб макеты приближаются по сложности к макетам из печати (благодаря богатым наборам вложенных шрифтов), есть еще большая проблема: браузеры автоматически не расставляют переносы. Особенно в языках, где существует много длинных слов (например, немецкий), что плохо сказывается на читаемости текста.

Но это дело можно подправить при помощи JavaScript client-side hyphenation, который был разработан phpHyphenator. Но и с этим инструментом могут возникнуть проблемы интеграции в браузере, но в будущем, думаю, и это будет решено.

Фишки OpenType

Тут есть и обратная сторона медали. Дело в том, что такие программы как InDesign и QuarkXPress 7+, не поддерживают типографических стандартов OpenType.

Функции и опции OpenType позволяют развивать этот формат, для того чтобы он мог иметь больше возможностей. Если приложение поддерживает данные фишки, то некоторые символы могут быть автоматически заменены.

Некоторые шрифты могут быть использованы только при наличии поддержки OpenType. Всеобъемлющей OpenType может содержать глифы и другие элементы. С помощью функции OpenType, базовая версия будет заменена версией с соответствующими элементам, которые поддерживаются в софтине. Пример на рисунке:

Недавно вышедший Firefox 4 поддерживает все вышеперечисленные фишки OpenType. Теперь вы можете пользоваться данными преимуществами следующим образом:

Microsoft предоставила список возможностей OpenType, которые поддерживает. Будем надеяться, что все остальные браузеры последуют их примеру.

Надеемся, эта статья была для вас познавательна! В скором времени все эти проблемы навряд ли решатся. Нам остаётся только ждать.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/
Перевел: Станислав Протасевич
Урок создан: 28 Апреля 2011
Просмотров: 90890
Правила перепечатки

5 последних уроков рубрики «Для сайта»


Эффекты блочного раскрытия

Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

15 полезных .htaccess сниппета для сайта на WordPress

Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

45+ бесплатных материалов для веб дизайнеров за август 2020

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

20 вопросов про веб-шрифты

Уже написаны горы статей, описывающих разные стороны работы с веб-шрифтами, собрано множество работающих примеров, но каждый день мы продолжаем сталкиваться с элементарным непониманием того, что такое веб-шрифты. Не у всех есть время гуглить материалы по данной теме, поэтому я попробовал дать ответы на часто задаваемые вопросы. Этот материал будет интересен прежде всего тем, кто еще не углублялся в тонкости шрифтовых технологий.

01. Зачем вообще нужны веб-шрифты, почему не обойтись стандартными?

Первое, что приходит на ум, стандартные шрифты ужасно приелись, а при их помощи трудно сделать что-то оригинальное. Как правило, большинство из них навевают тоску и уныние не только на пользователей, но и на веб-дизайнеров. Нестандартные шрифты в этом случае более выразительные и кроме того их на порядок больше, так что есть из чего выбрать. А еще, шрифт является неотъемлемой частью бренда, поэтому каждая компания стремится активнее его использовать, раз появилась такая техническая возможность.

И можно было бы вовсе отказаться от стандартных шрифтов, тем более, что многие мобильные ОС их не поддерживают (например, Arial, Taһoma, Verdana и Georgia). Но, к сожалению, индустрия, много лет подгоняемая под 96 DPI экраны и джорджии-верданы, оказалась не совсем готова к быстрым переменам, и на старых ОС Windows до сих пор возникают проблемы с отображением нестандартных шрифтов из-за особенностей механизма растеризации.

02. Как выбрать хороший веб-шрифт?

Шрифт — это не просто оцифрованный набор букв, созданный кистью на бумаге или в иллюстраторе, это еще и 98% доводки и полировки, хинтовки и тестирования на различных носителях и в разных размерах. Такой шрифт хорошо выглядит, его стиль отточен, с ним не возникнет проблем ни на принтере, ни на экране, от него веет добротностью.

Однако при выборе шрифта гораздо большее значение имеет даже не это, а целесообразность и соответствие шрифта способу использования и возложенным на него задачам. Если работаешь со шрифтами, нужно понимать, как все это работает, какие технологии используются. Это поможет не держать в голове кучу непонятных заученных правил, схваченных урывками. Например, каждый уважающий себя полиграфист знает, почему нежелательно использовать TrueType шрифты при офсетной печати, какие шрифты можно использовать в качестве текстовых, а какие — только для заголовков или указателей. Если он не будет этого знать, потом придется перепечатывать огромный тираж, а на работе его будут ждать постоянные сюрпризы и проблемы. Удивительно, почему к веб-дизайнерам никто не предъявляет никаких требований.

03. Как браузеры отрисовывают шрифты?

Довольно часто приходилось слышать, дескать, браузеры сами отрисовывают шрифты, поэтому везде выглядят по-разному. Но на самом деле, отрисовкой шрифтов занимается специальная графическая подсистема ОС: в Windows это GDI или DirectWrite, а на OS X и iOS — CoreText (а раньше QuickDraw). Всего есть 3 распространенных механизма растеризации (рендеринга) шрифтов: двухцветное (черно-белое) пиксельное, монохромное пиксельное (его еще часто называют antialiasing или обычное сглаживание) и субпиксельное. Субпиксельное использует особенность ЖК и плазменных дисплеев, где каждый пиксель разделен на 3 части (красную, зеленую и синюю), для того, чтобы увеличить горизонтальное разрешение отрисованной картинки и повысить четкость.

Однако браузеры действительно сами выбирают способ отрисовки, из тех которые предоставлены ОС. Например, в составе GDI есть 3 варианта рендеринга: ч/б, обычное сглаживание и субпиксельный ClearType. Особенность последнего в том, что сглаживание происходит только по горизонтали, в соответствии с расположением субпикселей. Именно поэтому при его использовании мы часто наблюдаем ужасные зубцы на горизонтальных и диагональных штрихах шрифта. К счастью, Microsoft начала потихоньку совершенствовать механизм, и на смену GDI пришла технология DirectWrite, где таки появилось сглаживание по вертикали. Сравните:

04. TTF или OTF?

TrueType и PostScript — изначально это были разные форматы шрифтов. В TrueType используются квадратичные кривые Безье, а в PostScript кубические кривые, хорошо знакомые дизайнерам, работающим в Illustrator и Photoshop. Сегодня оба способа описания кривых используются в составе одного формата OpenType, с той лишь разницей, что файлы с TrueType имеют расширение TTF, а с PostScript — OTF. У каждой из технологий есть свои особенности хинтинга и специфика применения.

Посмотрите на картинку. Если TrueType шрифт намного читабельнее в мелком кегле, но в крупном размере мы видим характерные зубцы, то для PostScript шрифта все ровно наоборот. Так происходит потому, что для PS и TT браузеры выбирают разные методы растрирования. Для PS браузер применил обычное монохромное сглаживание, а TT был обработан ClearType’ом. Вот и получается, что для текстовых шрифтов предпочтительнее будет TrueType, а для заголовков и крупных надписей лучше подойдет PostScript.

Еще мы видим, что пока DirectWrite используют не все браузеры. Так, его до сих пор нет в Google Chrome.

05. Что еще влияет на отображение?

Иногда способ растеризации лучше задавать вручную. Например, в браузерах с движком Webkit можно использовать CSS-свойство —webkit-font-smoothing и включить вручную обычное сглаживание вместо субпиксельного, и наоборот. Есть и нетривиальные способы добиться от браузера смены способа растрирования, на хабре однажды предлагали использовать хак с text-shadow.

Нельзя забывать и про размер шрифта (font-size). Форма контуров, контраст штрихов и читаемость могут сильно отличаться для разных кеглей. Отложите графический редактор и посмотрите, как веб-шрифт выглядит в браузере, в боевых условиях.

Еще один способ сгладить недостатки сглаживания — это управление цветом и контрастом. С целью ослабить эффект хроматического контура (при использовании ClearType проявляются желтые и пурпурные контуры по краям), можно попробовать ослабить тональный контраст, приблизив цвет фона к цвету текста. Сильно не увлекайтесь, помните о пользователях с ослабленным зрением.

06. Нужен ли веб-шрифтам хинтинг?

Хинтинг — это специальные инструкции, которые жестко привязывают абстрактные кривые шрифта к пикселям на мониторе. Абсолютное большинство шрифтов (в том числе коммерческих) — не хинтованные, потому что это довольно трудоемкая и сложная процедура. Для TrueType и PostScript хинтинг выполняется по-разному. Если вы берете дешевый шрифт, безопаснее формат OTF, потому что в TT процедура осталась неизменной со времен черно-белого растрирования и не совсем адекватная, а для PS процедура проще, и у автора есть возможность сделать автоматический хинтинг.

Шрифт без хинтинга при растрировании становится замыленным, а высота букв может скакать.

С одной стороны, шрифт с хинтингом довольно четкий, контрастный и равномерный, а с другой — формы букв искажаются в зависимости от кегля, а интервалы могут отличаться от реальных. Буквы строго подчиняются пикселям.

В ОС Windows мы видим, пожалуй, самый радикальный подход: такие популярные шрифты как Tahoma, Verdana, Arial и Georgia были отхинтованы специально под GDI ClearType, и когда появился DirectWrite, пришлось перехинтовывать и обновлять основные шрифты в комплекте ОС.

В отличие от Microsoft, Apple придерживается противоположного подхода, поэтому в ее операционных системах используются такие алгоритмы, которые позволяют более-менее качественно выводить любой шрифт, а хинтинг вообще не учитывается.

Отвечая на вопрос: стремительно приближается эпоха 300 DPI мониторов, а огромное количество мобильных устройств уже имеют такое разрешение, и скоро хинтинг будет вообще не нужен. Но так как Windows по-прежнему остается хинтингозависимой и ориентированной на мониторы с низким разрешением, в качестве текстовых шрифтов старайтесь выбирать качественно отхинтованные или стандартные, а иначе текст будет нечитаемым и трудным для восприятия.

07. @font-face или Cufon?

Как бы странно это не звучало, но есть еще люди, которые задают себе этот вопрос. Казалось бы, после того как браузеры начали поддерживать аттрибут @font-face, все остальные технологии встраивания шрифтов (Cufon, sIFR, Flash) вроде как должны были стать неактуальными. Но некий смысл все же остается, например способ замены шрифта изображением, когда на сайт выводятся не векторные кривые, а только отпечаток, как принтер отпечатывает его на листе или Photoshop выводит нередактируемый JPG. Это разрешено многими лицензиями на обычные (десктопные) шрифты. Некоторые производители шрифтов (например, Adobe) разрешают внедрять (в программы и на сервер) десктопный шрифт, если при этом он остается защищенным и его нельзя скачать. Если у вас нет возможности купить отдельную веб-лицензию, тогда можно применить подходящую для этого sIFR, когда шрифт встраивается с помощью флеш-объектов. Недостаток в том, что используется Flash, который поддерживается далеко не всеми устройствами. Еще можно использовать технологию Cufon (используется Canvas), если позволяет лицензия. Конечно, в данном случае скрипт будет громоздким, а выделение текста не работает, но в безвыходной ситуации подойдет.

Но лучше всего использовать @font-face, он и технологичнее, и удобнее, кроме того накоплен достаточный опыт для работы с ним. У него остается только один недостаток, что не все производители разрешают использовать свои шрифты в вебе.

08. В каких форматах должны быть файлы шрифта?

Подготовленные к внедрению ( @font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах:

TTF или OTF — привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF — незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT — внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8 кроме TrueType кривых, поддерживаются и PostScript);
SVG — для поддержки браузера Safari.

09. Можно ли конвертировать веб-шрифты?

Что бы вам ни говорили, нельзя просто переконвертировать файл и сохранить исходное качество шрифта, особенно, если изначально он был в формате OpenType. В процессе есть шанс потерять какие-то данные, вшитые в файл шрифта (скомпилированные инструкции, дополнительные знаки, метрики). Вы заметите это, когда при конвертации файл неожиданно «похудеет», особенно некошерно конвертировать TrueType в PostScript и обратно.

Кроме того, процесс конвертации почти всегда противоречит условиям лицензии, запрещающей модификацию. Проще говоря — это то же воровство. Когда вы забросите файлы в конвертор, будьте уверены, он не пропустит их и выдаст предупреждение, потому что в файле содержатся цифровые подписи производителя и соответствующие запреты на модификацию.

10. Сколько должны весить веб-шрифты?

Прежде чем отобразить страницу, браузер должен полностью загрузить файлы шрифтов. Может быть, вам приходилось видеть эффект «font flash» (или FOUT), когда на короткое мгновение вместо экзотических шрифтов успевают вспыхнуть стандартные шрифты системы. Нормально, если TTF (OTF) укладывается в 100 кб, а WOFF (EOT) в 50 кб. Всегда задумывайтесь о том, нужно ли вам вообще использовать нестандартные шрифты, даже если вы используете его в 1 коротком заголовке, все равно придется загружать весь файл шрифта целиком.
Чем больше в дизайне перфекционизма, тем меньше могут весить файлы шрифта, и старайтесь выбирать простые формы. В этом смысле, идеальная форма — это открытый геометрический гротеск с малым контрастом. Для ускорения загрузки шрифта, также бывает полезно включить его в файл стилей с помощью data:uri.

Цукерберг рекомендует:  Верстка - Что вам известно о Salient

11. Сколько начертаний шрифта можно использовать в вебе?

С точки зрения дизайнера, много начертаний — это круто. И действительно, для заголовочка — Bold, а вон там, для врезочки — ExtraLight, ненужные текстики вообще запихнем и запрессуем в Condensed Bold. Вот оно — настоящее богатство и стилистическое разнообразие. Но когда все это «богатство» начинают переносить на сайт, выясняется, что все жутко тормозит. И лучше даже не пытаться открыть такой сайт с мобильного устройства. А еще, не забываем, что каждое начертание стоит отдельных денег, и вполне вероятно, что заказчик попросит вас или найти шрифтовой синоним, или уменьшить количество начертаний, только бы не покупать всю дорогую гарнитуру. Нормально использовать максимум 2-3 начертания одной или разных гарнитур.

12. Нужно ли ограничивать набор символов?

Ответ на этот вопрос, зависит от того, что это за сайт и как он будет использоваться. Ограничения могут быть полезны, потому что есть возможность значительно уменьшить объем файлов. Иногда из-за незнания, разработчики грузят на сайт тяжеленные файлы шрифта с его полным набором знаков, и хорошо, если там нет иероглифов (к сведению, шрифт Arial Unicode содержащий большую часть символов из таблицы Юникод весит 22 мб).

Тем, кто делает англоязычные сайты проще всего, им вообще не нужно грузить дополнительные знаки, достаточно тех, что есть в Basic Latin (или ASCII). Если вы используете шрифт только для заголовков на русском языке + вкрапления английского, то вам будет достаточно наборов ASCII (Basic Latin) и 64 символа русского алфавита, совсем не обязательно грузить набор Cyrillic Extended из 420 символов. Совсем другая история, если ваш сайт многоязычный, в этом случае во избежание некорректного отображения символов нужно постараться охватить все используемые языки.

13. Можно ли использовать шрифтовые клоны?

Бывает, что купить оригинал шрифта или слишком дорого, или вообще невозможно, вот тогда будет уместно подобрать шрифтовой синоним (клон). Конечно, от них не стоит ждать потрясающего качества, даже если они сделаны, скажем, именитой российской фирмой. Совсем все плохо, когда вам попался опус какого-нибудь анонимуса-грамотея, решившего опробовать себя на новой ниве, таких шрифтов остерегайтесь. Вот примеры клонов (в скобках указан оригинал): FreeSet (Frutiger), Pragmatica и Helios (Helvetica). Обратите внимание, что формы букв могут отличаться. Большое количество клонов есть в справочнике шрифтовых синонимов Паратайпа.

14. Как протестировать шрифт?

Дизайнеры, не привыкайте видеть шрифты только сквозь окна фотошопа, графические редакторы используют свои методы сглаживания текстов, и вы можете быть обмануты красивой картинкой. Гораздо полезнее научиться тестировать и смотреть их в браузерах. Если есть демонстрационная страница, обязательно убедитесь, что при рендеринге не вылезают всевозможные артефакты и спайки. Есть еще такой инструмент как Typecast, где можно проверить многие шрифты, а потом показать страницу клиенту. Для тех, кто выбирает новый шрифт для уже готового сайта — незаменимый для вас сервис Web Fonts Previewer, вы сможете протестировать любой шрифт на живом работающем сайте, так, как будто вы уже его внедрили.

15. У меня на компе есть шрифт, можно ли его использовать на сайте?

Сначала немного о воровстве. Я знаю много дизайнеров, у которых на компе тысячи шрифтов, происхождение которых никому не ведомо. Как правило, просто скачали из интернета. Но почему-то никто не задумывается, что создание хороших шрифтов — это месяцы, а иногда и годы серьезной работы! Но не только поэтому нельзя использовать паленые, непонятно откуда взятые шрифты, а потому что вы можете столкнуться с серьезными трудностями на этапе разработки.

Если вы хотите встроить в сайт шрифт, который идет в составе операционной системы, вы сможете это сделать только растрируя или используя его в изображениях. Если же вам очень нужно встроить, тогда нужно будет купить отдельную лицензию, точно так же, как и обычные шрифты (и Georgia, и Tahoma есть в продаже).

16. Как купить веб-шрифт?

Когда вы «покупаете шрифт» — это ближе всего к покупке ПО, когда вы получаете лицензию на его использование, а не права на сам файл программы. Получается, юридически скомпилированный файл шрифта — это программа. Модификация и изменение, если этого не разрешает лицензия, рассматриваются как нарушение авторского права.

Удобный способ покупки шрифтов — через каталоги шрифтов (Fonts.com, MyFonts, Ascender, Typekit). Вы сможете просмотреть, сравнить и выбрать один из имеющихся вариантов использования, оплатить картой. Для компаний проще всего будет напрямую связаться со студией-производителем или же предоставить покупку шрифтов заказчику

А может быть вообще лучше не тратить деньги на шрифт? Существует множество замечательных бесплатных шрифтов, которые ни в чем не уступают платным!

17. Какие бывают лицензии?

Существуют разные типы шрифтовых лицензий, и с появлением веб-шрифтов их разнообразие только увеличилось. В реальной жизни, каждая компания сама устанавливает правила игры, и лицензия шрифта может содержать в себе признаки разных других. Нас будут интересовать типичные.

Обычная коммерческая лицензия ограничивает использование на определенном количестве устройств и допускает распространение работ, созданных с использованием шрифта. Это могут быть журналы, газеты, листовки, визитки, растрированные изображения шрифта, — все вместе можно назвать их отпечатками. Эта лицензия не подходит для кино, телевидения, веба и встраивания в приложения и программы, такие права нужно выкупать отдельно.

Есть еще специфические лицензии, например: лицензия с исключительными правами. В данном случае компания выкупает у шрифтовиков все права, и даже автор шрифта не в праве его где-либо использовать. Особенно удивляет, когда такие шрифты находятся на торрентах, или когда ими пользуются какие-нибудь сторонние дизайнеры.

Свободные лицензии (public domain) — автор шрифта допускает свободное распространение, с условием указания своего имени (Creative Commons) или без него (например, OFL, GPL, Apache 2.0). Этот тип лицензии допускает даже коммерческое использование, кроме продаж и платного распространения. Примеры: PT Sans, Opensans, Droid. Иногда разрешается модификация шрифта (GPL), но созданная вами модификация автоматически наследует такую же лицензию (то есть, вас тоже могут форкнуть). Свобода предполагает, что можно использовать на любых носителях, в т.ч. и веб.
Свободные для некоммерческого использования — то есть, вы можете использовать его во всех случаях, когда не заработаете на этом. Допустим, для обучения, хобби и общественных проектов. Иногда, производители разрешают использование для дизайнеров, в надежде на то, что счастливый клиент дизайнера потом купит коммерческую версию шрифта.

Подробнее про лицензии можно прочитать в статье Эмиля Якупова Практические и юридические аспекты шрифтового бизнеса.

18. В чем отличие лицензий для веб-шрифтов?

Веб-лицензии — наши самые любимые, они либо является дополнением к основной лицензии, либо даются отдельно. Регулирует частный случай — использование шрифтов на сайтах. Как правило, самое главное ограничение — на количество просмотров страниц. Например, 10 тыс в месяц, 100 тыс или 1 млн. То есть, чем больше людей посещают ваш сайт, тем больше вы платите за лицензию. Есть и безлимитные варианты, когда вы платите за шрифт 1 раз, но они во много раз дороже. Наверно, задались вопросом, а следит ли кто-то за количеством просмотров? Чаще всего нет. Но не забывайте, что огромное количество счетчиков отслеживают трафик вашего сайта и, вызвав подозрение продавца, вы можете лишиться лицензии.

И еще, отдельная веб-лицензия не разрешает использование на обычных компьютерах. Иногда веб-лицензия выдается бесплатно, то есть одновременно с покупкой десктопного шрифта вы получаете право использовать и его веб-версию. Но это пока редкость, абсолютное большинство производителей требует дополнительную плату.

После покупки вы получаете специальные файлы, которые встраиваете в сайт (TTF, OTF, WOFF, EOT), и некоторые шрифты не разрешают размещать данные файлы на сайте в незащищенном виде, так как теоретически третьи лица могут заполучить сами файлы шрифтов. Третий вариант – вы используете специальный веб-сервис производителя шрифтов, например как Typekit, принадлежащий компании Adobe, и платите абоненскую плату.

19. Где взять хорошие веб-шрифты?

Каталог свободных шрифтов от Google
Fontsquirrel — известный конвертер и каталог веб-шрифтов
Myfonts — огромный магазин шрифтов с удобной системой оплаты
Fonts.com — главный конкурент MyFonts
Typekit — сервис для аренды шрифтов от Adobe
Typecast — вышеупомянутый магазин с сервисом тестирования
P.S. еще один полезный ресурс, который посоветовал ilyaerin, WebFont.ru

20. Что еще можно почитать про веб-шрифты?


Ильдар Киньябулатов, веб-дизайнер ADV/web-engineering

Как загрузить на сайт шрифты Google Fonts без ущерба для производительности

Дата публикации: 2020-07-25

От автора: Google Fonts легко включить, но они могут оказать существенное влияние на время загрузки страницы. Давайте рассмотрим, как мы можем загрузить на сайт шрифты Google Fonts оптимальным способом.

Стоит отметить, что Google Fonts очень популярны. На момент написания статьи, их просмотрели в Интернете более 29 триллионов раз, и легко понять, почему — коллекция предоставляет доступ к более чем 900 красивым шрифтам, которые вы можете бесплатно использовать на своем веб-сайте. Без Google Fonts вы были бы ограничены несколькими «системными шрифтами», установленными на устройстве вашего пользователя.

Системные шрифты или «безопасные веб-шрифты» — это шрифты, которые чаще всего предустанавливаются в операционных системах. Например, Arial и Georgia поставляются с дистрибутивами Windows, macOS и Linux.

Как и все хорошие вещи, Google Fonts имеют свою цену. Каждый шрифт имеет объем, который веб-браузер должен загрузить, прежде чем их можно будет отобразить. При правильной настройке дополнительное время загрузки не заметно. Однако, если использовать это неправильно, ваши пользователи могут ждать несколько секунд, прежде чем появится какой-либо текст.

Google Fonts уже оптимизированы

Google Fonts API делает больше, чем просто предоставляет файлы шрифтов в браузер, он также выполняет интеллектуальную проверку, чтобы определить, как он может доставлять файлы в наиболее оптимизированном формате. Давайте посмотрим на Roboto, GitHub говорит нам, что обычный вариант весит 168kb.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

168 КБ для одного варианта шрифта

Однако, если я запрашиваю тот же вариант шрифта из API, мне предоставляется этот файл. Который весит всего 11kb. Как это может быть?

Когда браузер выполняет запрос к API, Google сначала проверяет, какие типы файлов поддерживает браузер. Я использую последнюю версию Chrome, которая, как и большинство браузеров, поддерживает WOFF2, поэтому шрифт предоставляется мне в этом сильно сжатом формате.

Если я изменю пользовательский агент на Internet Explorer 11, я получу шрифт в формате WOFF. Наконец, если я изменю пользовательский агент на IE8, я получу шрифт в формате EOT (Embedded OpenType).

Google Fonts поддерживает более 30 оптимизированных вариантов для каждого шрифта и автоматически определяет и предоставляет оптимальный вариант для каждой платформы и браузера. — Илья Григорик, Оптимизация веб-шрифтов.

Это отличная функция Google Fonts, проверяя пользовательский агент, они могут обслуживать наиболее эффективные форматы для браузеров, которые их поддерживают, и в то же время последовательно отображать шрифты в старых браузерах.

Кэширование в браузере

Еще одна встроенная функция Google Fonts — кеширование в браузере.

Из-за природы Google Fonts браузеру не всегда нужно загружать полные файлы шрифтов. Например, SmashingMagazine использует шрифт «Mija», если ваш браузер впервые видит этот шрифт, ему нужно будет полностью загрузить его до отображения текста, но при следующем посещении веб-сайта с использованием этого шрифта браузер будет использовать кэшированную версию.

Поскольку Google Fonts API становится все более широко используемым, вполне вероятно, что посетители вашего сайта или страницы уже используют в кэше браузера любые шрифты Google, примененные в вашем дизайне. — FAQ — Google Fonts.

Срок действия кэша браузера Google Fonts истекает через год, если он не будет очищен раньше.

Примечание. Mija не является шрифтом Google, но принципы кэширования не зависят от поставщика.

Возможна дальнейшая оптимизация

Хотя Google прилагает большие усилия для оптимизации доставки файлов шрифтов, в вашей реализации все еще возможны способы оптимизации, чтобы уменьшить их влияние на время загрузки страницы.

1. Ограничение семейства шрифтов

Самая простая оптимизация — просто использовать меньше семейств шрифтов. Каждый шрифт может добавить до 400 КБ к весу страницы, умножьте это на несколько разных семейств шрифтов, и вдруг ваши шрифты весят больше, чем вся страница.

Я рекомендую использовать не более двух шрифтов, одного для заголовков и другого для содержимого обычно достаточно. При правильном использовании размера шрифта, толщины и цвета вы можете добиться превосходного вида даже одним шрифтом.

Три толщины одного семейства шрифтов (Source Sans Pro)

2. Исключение вариантов

Благодаря высокому стандарту качества Google Fonts многие семейства шрифтов содержат полный спектр доступных толщин шрифтов:

Thin Italic (100i)

Light Italic (300i)

Regular Italic (400i)

Medium Italic (600i)

Bold Italic (700i)

Black Italic (800i)

Это отлично подходит для продвинутых сценариев использования, в которых могут потребоваться все 12 вариантов, но для обычного веб-сайта это означает загрузку всех 12 вариантов, когда вам может понадобиться только 3 или 4.

Например, семейство шрифтов Roboto весит

144 КБ. Однако, если вы используете только варианты Regular, Regular Italic и Bold, это число уменьшается до

36kb. 75% экономии!

Код по умолчанию для реализации Google Fonts выглядит следующим образом:

Как подключить шрифт на сайт в CSS

Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:

В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;

В самом низу файла стилей style.css прописываем правило:

А также в файле стилей задаём правило для всех заголовков:

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

Если вы хотите подключить несколько шрифтов или их начертаний, то просто добавьте их под предыдущим:

Вы могли заметить, что есть разные форматы шрифтов — .ttf, .woff, .eot, .svg и другие. Еще существует формат для современных браузеров .woff2, но о нем мы расскажем в одной из следующих статей.

Обычно каждый шрифт подключается сразу в 3-х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в том числе и старых. Выглядит это так:

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них.

Как подключить шрифт с помощью различных сервисов

Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

  1. Находим нужный шрифт или выбираем из уже имеющихся;
  2. Скачиваем архив и добавляем его в папку fonts;
  3. Копируем уже готовый CSS-код для файла style.css;

Самый простой способ подключения шрифтов

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт или несколько:
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле:
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег head:

Как подключить шрифт к шаблону Moguta.CMS

  1. Через хостинг загрузить необходимый шрифт в папку /mg-templates/mg-default/fonts;
  2. Через административную панель открыть файл стилей;
  3. Прописать в самом верху новый шрифт;
  4. Ниже в файле стилей найти интересующий нас элемент и задать или изменить свойство font-family: *название нового шрифта* ;

Как добавить ссылку с Google Fonts в шаблон Moguta CMS

  1. Заходим Настройки—>Шаблон—>template.php;
  2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
  3. Затем в файле стилей задаём новый шрифт к нужному элементу:

Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях.

Веб-шрифты и скорость сайта

Fallback шрифты, font-display и UX

Коротко и по делу поговорим о веб-шрифтах. Как браузер «пишет», что такое fallback шрифты, как это влияет на скорость сайта и некоторые рекомендации из моего личного опыта. Приятного чтения.

Содержание:

Свойство Font-display

Свойство font-display в правиле @font-face отвечает за то, как шрифт будет отображаться во время загрузки. У этого свойства 5 значений: auto, block, swap, fallback, optional.

Auto означает что стратегию загрузки определяет браузер. В большинстве своем браузер придерживается стратегии block. Block в свою очередь работает следующим образом: пока шрифт загружается браузер отрисовывает текст прозрачным шрифтом, т.е. этот контент пользователь не видит. После того как шрифт загрузился — прозрачный текст отрисовывается загруженным шрифтом. Промежуток времени от прозрачной отрисовки до загрузки шрифта и отображения контента называется периодом блокировки шрифта.

Swap работает почти так же как и block, только отрисовка происходит не прозрачным, а запасным шрифтом. А после того как шрифт загружается — происходит подмена. Это очень удачный вариант, потому что во время загрузки шрифта пользователь уже может начать визуально изучать контент. Это то свойство, которые нужно использовать всегда.

Ну как, гениально и просто? Согласен. А теперь давайте посмотрим на поддержку этого свойства в браузерах:

IE и Edge как обычно впереди планеты всей �� Но, в целом поддержка неплохая. Более того, это свойство не требует отказаться от чего-либо, чтобы начать его использовать. Поэтому используйте его всегда в связке с запасными шрифтами. А вот как установить запасной шрифт рассмотрим ниже.

Fallback шрифты

В пункте выше я уже упомянул, что fallback шрифт — это запасной шрифт, который браузер может использовать пока не загружены основные. Поэтому просто рассмотрим код, который задает запасные шрифты:

Если попытаться прочитать этот код, то получатся следующие инструкции для браузера:

  1. Используй шрифт «Exo 2», пожалуйста
  2. Если такого шрифта нет — попробуй «Roboto»
  3. Ладно, если всех их нет — используй просто один из sans-serif (так обозначаются шрифты без засечек) шрифтов

Вот так просто вы можете установить fallback шрифты.

Ошибки в Google Page Speed Insights связанные со шрифтами

Настройте предварительную загрузку ключевых запросов

Лучше сразу сказать браузеру о том, что ему необходимо будет загрузить, поэтому для всех шрифтов, которые используются на вашем сайте — указывайте мета тег в с параметром preload

Настройте показ всего текста во время загрузки веб-шрифтов

Эта ошибка возникает когда у вас до загрузки шрифта не отображается контент. Поэтому в правиле @font-face нужно установить свойство font-display со значением swap

Личные рекомендации

  1. Никогда не используйте больше трех шрифтов
  2. Всегда указывайте font-display:swap в правилах @font-face
  3. Задавайте правильные fallback шрифты для своего сайта

Если вы будете придерживаться этих простых правил — шрифты будут приносить вам радость, а не хлопоты. Спасибо за внимание ��

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих