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

    Бывало ли так, что вы видите на веб-странице картинки и оформление, но не видите текста — он появляется на пару (десятков) секунд позже? Это загружаются кастомные веб-шрифты. Объясняем, почему это происходит и как этого избежать.

    Классический вопрос на собеседовании ops-инженеров и программистов: вы написали в адресной строке браузера meduza.io и нажали Enter. Что произойдет? (Ответ на 10 страницах)

    Ок, мы указали для своего текста font-family: PFRegal, «Times New Roman». Что произойдет?


    Браузер посмотрит, есть ли для PFRegal объявление font-face. Если оно есть, то начнется загрузка файла шрифта. Что будут видеть читатели те секунды (десятки секунд на 3G), пока происходит загрузка?

    В Safari: ваш текст будет занимать на странице место, но останется прозрачным, то есть невидимым для читателя. Для расчета занимаемого пространства используется fallback font (стандартный шрифт, в нашем случае Times New Roman), об этом чуть ниже.

    В Chrome и Firefox 3 секунды прозрачного текста, далее используется системный fallback font.

    В IE сразу покажется fallback font.


    IE не так уж и плох! image

    Все три подхода соответствуют стандарту: „in cases where textual content is loaded before downloadable fonts are available, user agents may render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font.“

    Как бороться с «прозрачным текстом» в Safari и Chrome?


    Есть несколько способов:

    1. Сделайте отдельный css-файл с инлайном шрифта, подключайте его после html кода с текстом. HTML документ обрабатывается (и отображается на экране) от начала файла к концу, по мере загрузки. Это дает возможность управлять шрифтами даже без использования JavaScript. Важно сделать именно инлайн, а не подключение внешнего файла шрифта. Способ не работает в Desktop Safari и может не сработать, если между запросом на рендеринг текста текстом и подключением css-шрифта нет достаточного промежутка по времени, экспериментируйте.

    2. Используйте javascript-хак с invalid media type. Этот способ позволяет сразу же показать текст fallback-шрифтом, но на наших тестах fallback-шрифт висит чуть дольше, чем при первом способе. У этого подхода есть проблемы в IE и FF, но в остальном он кажется самым логичным на сегодняшний день.

    3. Используйте Font Loading API, это позволяет начать неблокирующую загрузку шрифта сразу при открытии страницы. Это новое js-API и оно поддерживается только Chrome и самым последним Safari

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

    Теперь оно моргает при рефреше!


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

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

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

    1. Настроить нормальное кеширование на стороне сервера (cache headers).

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

    Как проверить, что все работает нормально? У меня слишком быстрый интернет


    1. Используйте встроенные средства Google Chrome.

      image
      Возможность сэмулировать плохой интернет. Good 3G — наш выбор для отладки Медузы

      image
      Сброс кеша по правой кнопке мыши (работает только если открыты Developer Tools)

      А также суперзнание, как заблокировать загрузку определенного адреса или даже маску адресов в Хроме: включите Developer Tools Experiments в chrome://flags → Откройте Chrome Developer Tools → Настройки (спрятаны в трех точках в правом верхнем углу) → Experiments → Нажмите Shift 6 раз → Поставьте галочку Request blocking

      image
      Теперь вы можете сделать вот так

    2. Для отладки в Desktop Safari потребуется установить Network Link Conditioner (для скачивания необходим Apple Developer Account). Для отладки iOS Safari и iOS Webview используйте Network Link Conditioner в настройках вашего устройства (Settings → Developer → Network Link Conditioner). Учтите, настройки ограничения скорости применятся на всю систему, а не только на Safari.

    Как насчет нового стандарта?


    Всегда пожалуйста. Вот свойство font-display, доступное в Chrome Canary. Оно решает все проблемы, перечисленные в статье. Ещё года 2–3 и можно будет вздохнуть спокойно. 

    Я перфекционист, есть ли что еще улучшить?


    Конечно! Сожмите файл шрифта, настроив его под себя. Вырежьте глифы, которые вы не используете в текстах (у Регала их по умолчанию более 800). Отключите лишние Open Type Features. Для всего этого вам потребуется специальный софт [1], [2] или [3] и понимание того, как устроены шрифты.

    Вывод?


    Неправильно подключенный кастомный шрифт ухудшает время загрузки страницы, и это приводит к тому, что ваши страницы видит меньше людей, которые не дожидаются загрузки. Идеального способа подключения кастомных шрифтов в вебе пока нет, но есть достаточно хорошие хаки, из которых нужно выбрать наиболее подходящий для конкретной ситуации.
    Метки:
    Meduza: dev 27,67
    Мы разрабатываем Медузу
    Поделиться публикацией
    Комментарии 29
    • +22
      Holy cow, Медуза на Хабре!
      • 0
        Еще бы приложение для Windows Phone… Хотя о чем это я.
        • 0
          Подождите… Но ведь уже давно есть! Не без багов, но что поделать.
          • +1
            Только вот пользоваться им невозможно, к сожалению.

            Мало того что при скролле дёргается, так ещё когда из уведомлений новость открываешь, оно включается и тут же выключается, оставляя тебя ни с чем))
            • 0
              Пффф… С этими багами хоть можно жить (скроллить аккуратнее… ещё аккуратнее и открывать из приложения новости) =)
              А вот то что не работают тесты и трансляции, а некоторые новости из раздела шапито не открывает подвисая — это отвратительно.
              Честно говоря меня удивляет как можно было так сделать приложение, которое в общем-то только текст с картинками показывает.
              • +1
                Только вот я не смотрю новости отдельно в приложении. Обычно перехожу на интересное из вк (хорошо что перекидывает в браузер). Т.е. формально новости из шторки для меня основной функционал приложения)) И ладно, запускаешь специально приложение чтобы новость посмотреть, так его ещё и лихорадить начинает при достаточно медленном скролле.
                • 0
                  Думаю, что многие разработчики (владельцы) приложений под windows думают, что-то типа: «И тааак сойдёт» или «Да их там всего 2 или 3 пользователя, баг и не заметят», а может и «Совсем офигели, да они должны боготворить нас даже за это!». Самая тяжёлая ситуация конечно с инстаграмом.
                  • 0
                    А что с инстаграмом?
                    • 0
                      Сначала не было 2года обновлений (ни багфиксв, ни новых фич), а потом (под выход 10ки) таки сделали, но: вероятность падения при выкладывании фото 90%, на видео 100% падение, библиотеку фото грузит минуту (например вотсапп справляется за секунду). Это я по верхам только прошелся. Причем такое поведение и на 640, и на 930.
                      • 0
                        Забавно. У меня на 430 всё отлично, кроме видео. Видео не добавляет в принципе, а во всём остальном ни падений, ни лагов, и библиотеку грузит норм (хотя тут возможно влияет малое количество фото).

                        Пользуюсь довольно активно.
        • +1
          Как раз таки подгрузка шрифтов на «Медузе» меня и сводит с ума: читаю новости через RSS-ридер, при каждом открытии страницы шрифты подгружаются где-то через секунду-две… Нигде такого не замечал больше.
          • +1
            Полторы секунды грузится CSS-файл со шрифтами почти мегабайтного размера.

            P.S. У меня не самый быстрый интернет — 20Мбит/c где-то.
            • +1
              Хотя тут я погорячился — CSS-то может и кэшируется, это уж как ридер сделан…
            • 0
              что за ридер?
              • 0
                Inoreader сейчас. Вообще, под Android нет нормальных RSS-ридеров :(
              • 0
                Поддерживаю. Медуза — единственный сайт, где я вижу скачки шрифта.

                Открываю из клиента Твиттера для андроида.
              • +1
                Почему не любят упоминать про вариант с ОС-зависимыми шрифтами (первый способ из статьи) — не понимаю.
                • 0
                  Потому что в статье стоит задача «нужно использовать конкретный шрифт» и её решают. По ссылке не вариант решения этой задачи, а полностью другая постановка — «я тут подумал и решил что на шрифты можно подзабить». Вполне имеет право на существование, но это другое.
                  • +1
                    Я же не говорю, что половину статьи надо альтернативному подходу посвятить. Просто бывает, что придумывают себе не очень важную цель и потом убивают на её достижение кучу ресурсов.

                    Disclaimer: когда реально без подгрузки шрифта никак, тут спорить не буду.
                    Вот, кстати, хорошая статья, где по полочкам разобраны разные подходы: A Comprehensive Guide to Font Loading Strategies.

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

                    P.S. И «я тут подумал» имеет смысл заменить на "дизайнеры Medium подумали".
                • +1

                  Медуза учит как использовать шрифты? Серьёзно? :-) У вас текст не просто моргает, он исчезает на 1-2 секунды и появляется с новым шрифтом. Это жесть. В остальном у вас все круто, но как раз со шрифтами вам надо что-то делать

                  • 0
                    где именно? какой сценарий использования?
                    • +1

                      Мобильный хром, девайс Huawei Honor 4C (средний по мощности телефон), после загрузки любой страницы показываются дефолтные шрифты, потом, видимо, подгружаются нормальные, текст пропадает (причем реально на долго, 1-2 секунды) и появляется с нормальным шрифтом.

                      • 0
                        На главной сначала нет текста, потом появляется с загруженным шрифтом. В статьях — сначала системный шрифт, потом меняется на загруженный. Android 5.1.1, Chrome 54.0.2840.85
                      • 0
                        Я может чего то не понимаю, но чем шрифты на этой Медузе такие особенные, чтобы стоило так париться? Или это больше на мобильных девайсах заметно?
                        • 0

                          Фиг знает, выглядит приятно, но наверное весят много

                          • +2
                            Ну не знаю, я видимо не дизайнерский эстет…
                            Вот читаю хабр, ну шрифт, как шрифт — Verdana (и то это я узнал, заглянув в код). Переключился на вкладку с Медузой. Ну шрифт как шрифт, если бы не эта статья, то я бы даже не обратил внимание, что там какой то нестандартный PREgal.
                            Думаю 90% пользователей тоже не замечают, но при этом какие то свистопляски с бубном надо делать разрабам и всё равно проблемы остаются. Стоит ли овчинка выделки? Очень сомневаюсь…
                      • 0
                        Если на сайте в одном текстовом блоке могут встречаться иероглифы, кириллица и латиница, то кастомные шрифты вообще не вариант. Как это будет выглядеть на разных версиях девайсов и операционных системах с разной локалью тоже надо разбираться.

                        В связи с этим для себя отложил эти кастомные шрифты в долгий ящик т.к. не вариант.
                        • +1
                          Жутко раздражает, когда страница сначала рендерится fallback-шрифтом, а через пару секунд всё переверстывается подгруженным шрифтом. Имхо, надо либо добиваться подгрузки шрифта ДО рендеринга, либо признать, что современный веб не готов для этого и отложить до лучших времен.

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

                          Самое читаемое