Теги:

Подключение и оптимизация шрифтов

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

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

  1. Выберем формат шрифтового файла
  2. Уменьшим размер
  3. Рассмотрим инструменты для работы с шрифтами
  4. Узнаем, как правильно подключать в css
  5. Попробуем стандартные шрифты, которые поддерживаются браузерами

Для начала рассмотрим три часто используемых формата и в чём их разница.

  • TTF — этот формат был разработан компанией Apple и уже очень давно поддерживается всеми браузерами
  • WOFF — был разработан компанией Mozilla для своего браузера и имеет значительно меньший размер по сравнению с TTF (позже мы сравним их)
  • WOFF2 — улучшенная версия предыдущего формата, который стал ещё легче

Возьмём для сравнения один шрифт «Montserrat-Bold», сконвертируем его в трёх форматах и сравним их размер.

Вот что получилось:

Montserrat-Bold.ttf -> 312 кб

Montserrat-Bold.woff -> 135 кб

Montserrat-Bold.woff2 -> 89,5 кб

Как вы уже заметили, размеры существенно разнятся особенно между ttf и woff2 в пользу последнего. Чтобы достичь такого результата, я использовал онлайн конвертеры, которые перечислены ниже:

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

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

  • FontForge — бесплатное приложение, которое позволяет редактировать шрифты, визуально просмотреть какие символы находятся внутри него ( а их там порой немало и многие мы точно никогда не будем использовать ) и вручную удалить лишние, также он удобен для получения юникода того или иного символа из шрифта и если вам интересно, то вы можете создать свой шрифт или изменить текущий, но это уже не по части frontend :).
  • transfonter.org — хороший удобный сервис для конвертирования шрифтов, но одна из важных для нас особенностей — это возможность оставить в шрифте только необходимые символы, для этого в строке «Characters» перечислите все символы, которые хотите оставить, на выходе вы приятно будете удивлены очень маленькому размеру файла.
  • fonttools — утилита, которая работает из консоли на Python, в репозитории описано как её установить. Она также удаляет лишние символы из шрифтов, к минусам отнесу только то, что она работает исключительно с TTF файлами и ей в текстовом файле столбиком нужно перечислить юникод коды символов.

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

Файл: codes.txt


U+0000
U+0002
U+000D
U+0020

введём команду:

pyftsubset FiraSans.ttf --output-file=FiraSans-min.ttf --unicodes-file=codes.txt

FiraSans.ttf — это наш начальный файл, а FiraSans-min.ttf — это то, что мы хотим получить на выходе. В итоге мы получим результат, аналогичный тому, что можно сделать и в сервисе transfonter.org, консольное приложение хорошо лишь тем, что ему не требуется интернет и оно всегда у вас работает, а сервисы имеют тенденцию рано или поздно закрываться, становиться платными и т.п.

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

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


@font-face{
    font-family:"Montserrat";
    src:url(fonts/Montserrat-Regular.woff2) format("woff2"),
	url(fonts/Montserrat-Regular.woff) format("woff"),
	url(fonts/Montserrat-Regular.ttf) format("truetype");
    font-weight:normal;
    font-style:normal;
    font-display:swap
}

В src мы подключаем шрифтовые файлы в определённой последовательности, которая означает следующее — попробуй прочитать шрифт woff2, если браузер не знаком с этим форматом, то ему предлагают woff, а если он и его не знает, то загрузится ttf, именно в такой последовательности проверка и будет происходить. Если мы поставим всё в обратной последовательности, то очевидно что загрузится TTF, а остальные форматы он даже не будет рассматривать. Параметр font-display:swap делает загрузку шрифта не блокирующей и позволяет нам пока они загружаются отобразить стандартные.

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

Есть ещё один интересный подход в frontend разработке — это использование только стандартных шрифтов, к примеру, поисковик Google использует стандартные шрифты font-family: arial, sans-serif; и многие крупные ресурсы тоже пошли тем же путём, потому что малейшее преимущество над конкурентом — это дополнительные миллионы доходов, а текст и со стандартными шрифтами выглядит красиво, к примеру мой блог, на котором вы сейчас находитесь, использует только стандартные шрифты.  Если вас заинтересовало данное движение, то давайте посмотрим несколько доступных вариантов, сразу скажу их намного больше того, что я описываю ниже, остальное вы можете узнать в том же Google :).

  • arial
  • Times New Roman
  • Helvetica
  • Courier New
  • Courier
  • Verdana
  • Georgia
  • Garamond
  • Palatino
  • Bookman
  • Trebuchet
  • Tahoma
  • Arial Black
  • Comic Sans MS
  • sans-serif
  • britannic bold
  • consolas
  • monospace

Как видите, шрифты на любой вкус, если вам трудно выбрать, какой именно подходит для вашего контента — то вот вам пару базовых советов: если вы рассказываете что-то историческое или связанное со стариной то лучше использовать шрифт с засечками, такие раньше были в моде и они являются отсылкой на прошлую эпоху, а если вы пишете о чём-то современном, то берите без засечек, такие как «Arial», «Verdana», «Helvetica» и т.п. Если вы хотите проиллюстрировать программный код или что-то, что относится к кодам, то тут как никто лучше подходит «consolas» и «monospace». Теперь, когда вы узнали, как эффективно использовать шрифты на своём сайте, я настоятельно рекомендую опробовать эти приёмы и убедиться в их эффективности.