Решив создать собственный сайт, человек зачастую мечтает, что он будет выглядеть нестандартно. Ведь необычный дизайн может оказаться привлекательным для посетителей, так что оформление ресурса становится первичным, а контент – уже вторичен. В оформлении сайта могут помочь кастомные шрифты – они называются собственными. К сожалению, веб-страница, содержащая собственные шрифты, загружается невероятно долго. Возникает вопрос о том, можно ли изменить эту ситуацию, облегчив загрузку и при этом пользуясь кастомными шрифтами.
Существует несколько способов шрифтовой оптимизации. Вы можете:
- применить Google Fonts API;
- разместить шрифты на хостинге;
- использовать способ отложенной шрифтовой загрузки;
- уменьшить размер шрифта.
Стоит рассмотреть каждый из этих способов более внимательно, чтобы понять, в чем заключаются их особенности и выбрать оптимальный для себя вариант. Все они выглядят несложно, однако, как и любое действие по оптимизации, требуют некоторых знаний в программировании и веб-дизайне. Сначала набираются шрифты, причем лучше всего создать минимальный набор, чтобы не усложнять работу. Затем используется один из перечисленных методов – размещение, применение специализированного сервиса, Google Fonts API, настройка отложенной загрузки либо отладка сжатия и кэширования.
Оптимизация шрифтов с помощью Google Fonts API
Сервис Google Fonts API позволяет облегчать работу со шрифтами при создании страницы. Работа не составляет особых затруднений. Нужно воспользоваться ссылкой сервисного скрипта, после чего сервис самостоятельно выдает файлы самих шрифтов и нужный код CSS. При этом шрифты уже имеют языковую разбивку. Сервис способен осуществлять поддержку нескольких десяткой комбинаций.
Таким образом, вставлять шрифты с помощью Google Fonts API совсем не сложно, однако загрузка кастомных шрифтов остается проблемой, поскольку вес их достаточно велик. Чаще всего, пользователи выражают недовольство длительностью загрузки именно потому, что шрифты загружаются долго, заставляя все это время любоваться пустотой на мониторе. Приходится предпринимать какие-то действия, чтобы избавить пользователей от ожидания.
Самое простое, что можно сделать в данной ситуации, это избавиться от лишнего. Произведите проверку для отсеивания тех символов, которые на сайте не применяются. Попробуйте обрезать те символы, которые применяются в работе сайта. Стоит обратить внимание и на варианты нужного шрифта – ведь он может быть не только обычным, но еще полужирным или курсивом.
Использование сервиса Google Fonts API хорошо тем, что вы с его помощью загружаете лишь те шрифтовые варианты, которые требуются. Еще дин плюс этого метода в том, что браузеру не обязательно полностью загружать весь шрифт, если какие-то его элементы в конкретной ситуации не нужны. Здесь также применяется text={letters}, позволяющий обрезать символы по заданным параметрам. Эта функция часто применяется в логотипах.
Оптимизация шрифтов с помощью размещения на хостинге
Чаще всего, в браузере, с которым работает пользователь, не встречаются кастомные шрифты. Поэтому при создании сайта требуется прописывать вспомогательные файлы, содержащие сведения о шрифтах и их начертании. Обычно файлы распределяются по браузерам. Нужно учитывать, что, к примеру, первые версии Android работают с форматом TTF, а Google Chrome поддерживает woff.
Если же шрифт в браузере пользователя имеется, что пусть и редко, но бывает, есть возможность применить local и разместить шрифтовые файлы на хостинге. Чтобы сайт поддерживался любым из браузеров, можно задействовать гарнитуру – так называется специальный шрифтовой набор для любого начертания. Для обработки набора подходит сервис Font Squirrel либо сходный по функциям. Разместить на хостинге пакет файлов и код CSS вы сможете сразу после того, как они будут вам отправлены.
Оптимизация шрифтов с помощью отложенной загрузки
Отрицательные эффекты при загрузке шрифтов можно купировать, если использовать некоторые способы, о которых знают только профессионалы. К числу таких способов относятся:
- предварительная загрузка;
- система Font Loading API;
- кэширование (в мобильных устройствах заменяется base64)
Способ предварительной загрузки помогает, если шрифты загружаются не с основной страницы. Современные браузеры осуществляют поддержку методики prefetch, которая и применяется при данном способе.
Font Loading API, к сожалению, не у всех браузеров находит поддержку, однако помогает ускорить загрузку. Способ построен на временной совместимости собственных шрифтов и тех, которые установлены у пользователя. При загрузке сначала отображаются пользовательские шрифты, одновременно идет загрузка шрифтов кастомных. Браузер при это способен зависнуть на какой-то миг, который незаметен для пользователя. За это время шрифты на странице меняются на собственные.
Наконец, кэширование действует не во всех случаях, а лишь тогда, когда пользователь возвращается на закрытую страницу. Этот способ уменьшает время, отведенное на загрузку страницы.
Оптимизация шрифтов с помощью изменения размера
Изменить шрифты для наилучшей загрузки страницы сегодня возможно с помощью одного из трех методов, а точнее:
- сжатие шрифта;
- обратная совместимость;
- исключение глифов.
В случае если при оптимизации применяется сжатие статическое, то работа упрощается – можно просто расположить рядом со шрифтовыми файлами их архивы. Если же используется сжатие динамическое, то необходимо контролировать сжатие всех распространенных шрифтовых форматов еще на хостинге. Если проверка сжатия показала, что форматы подаются прежними, добавьте в правила сжатия нужные типы файлов. Нередко такое несложное действие помогает сжать шрифт в размерах почти вполовину.
В ситуации, когда кастомный шрифт не может загрузиться, браузер нужно поставить в известность о том, какой набор шрифта он должен применять. В font-face уже прописано название собственного шрифта, укажите после него шрифт вспомогательный. Требуется прописать также, какой модификации шрифт должен использоваться – monospace, sans-serif, serif (эти окончания нужно непременно указывать).
Об исключении глифов можно сказать следующее. Текст на странице прорисовывается, не требуя абсолютно всех используемых в шрифте символов. Все эти глифы можно удалить с помощью специальных инструментов. Чаще всего, для этого применяются такие сервисы, как Subset.py, Font Squirrel, Google Fonts, FontPrep. Метод довольно прост, однако позволяет существенно урезать файл.
Ваша задача заключается в том, чтобы проверить все собственные шрифты, отсеять те, которые практически не используются, и далее работать лишь с теми шрифтами, которые требуются для проекта. Методы шрифтовой оптимизации могут применяться любые, главное – чтобы они в вашем случае оказались действенными.
