Что делать со шрифтами, как оптимизировать?

Question

[lexstile]

Делаю проект, подключил шрифты - font awesome и open sans ~ 3,1 Мб.
Вопрос: так и оставить или есть какие-то методы оптимизации? (Допустим, использовать через cdn или какие-то еще)

Comments

[Rustam Bainazarov]

Навряд ли там 3,1 Мб.

Браузер загружает только в одном формате файл шрифтов, указанный в @font-face. Вы скорее всего общий вес всех файлов указали (TTF, WOFF, WOFF2 и т. д.) + учитывайте ещё GZIP, поэтому по факту гораздо меньше пользователь будет загружать.

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

[WapSter]

Как вариант используйте только woff2 woff. Все современные браузеры их поддерживают.

[Rustam Bainazarov]

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

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

[WapSter]

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

[Rustam Bainazarov]

Тимур Турсунбаев, в IE11 и EDGE 12 WOFF не грузился иногда :))

Мне их поддерживать приходится, ибо я делаю в основном на широкую аудиторию.

Answer 1

[Odisseya]

Оптимизируйте размер шрифтов:

• Из font awesome возьмите только фактически используемые глифы и на их основании сгенерируйте собственный шрифт.
  
• open sans — конвертируйте и подключите как woff2 и woff — отберите 2-3 фактически
  используемых начертания, у которых возьмите только нужные charset (например, cyrillic)).
  

Оптимизируйте загрузку и рендеринг шрифтов:

• Используйте свойство font-display (также можно сделать фоллебек из визуально схожих системных шрифтов)
  
• Приоритезируйте загрузку шрифтов "из первого экрана", например:

  <link rel="preload" as="font" type="font/woff2" crossorigin="" href="*.woff2">

  
  

Comments

[Rustam Bainazarov]

Дополню, что про font-display — это о font-display: swap. А фолбек на TTF лучше тоже иметь (Edge 12 умудрялся не грузить WOFF, например), он всё равно не будет загружен, если браузер поддерживает более совершенные форматы.

[Odisseya]

Рустам Байназаров, не обязательно «swap», зависит от стратегии отрисовки шрифтов (при подмене на схожий системный — на информационных сайтах чаще font-display: fallback).

[Rustam Bainazarov]

Odisseya, согласен с вами.