Fonts google: google/fonts: Font files available from Google Fonts, and a public issue tracker for all things Google Fonts

Делаем шрифты Google быстрее⚡. Если вы используете шрифты Google на своем веб-сайте… | Сиа Карамалегос | Clio + Calliope

https://sia.codes/posts/making-google-fonts-faster/

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

1. Пропустить некоторое время задержки при загрузке шрифтов из Google Fonts
2. Самостоятельно разместить свои шрифты для более высокой скорости и большего контроля над FOIT и FOUT
3. Сделайте то же, что и № 2, но быстрее с помощью классного инструмента

Google Fonts размещены в довольно быстрой и надежной сети доставки контента (CDN), так почему мы можем рассмотреть возможность размещения на собственной CDN?

Давайте сделаем шаг назад и посмотрим, что происходит, когда вы запрашиваете у Google Fonts стандартную <ссылку> , скопированную с их веб-сайта:

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

Затем каждое объявление @font-face указывает браузеру использовать локальную версию шрифта, если она доступна, прежде чем пытаться загрузить файл с fonts.gstatic.com:

Так в чем проблема?

https://sia.codes/posts/making-google-fonts-faster/

Во-первых, у нас есть как минимум 2 отдельных запроса к разным хостам — сначала для таблицы стилей на fonts.googleapis.com, а затем к уникальный URL-адрес для каждого шрифта, размещенного на сайте fonts.gstatic.com. Это делает невозможным использование преимуществ мультиплексирования HTTP/2 или подсказок ресурсов.

Вы можете спросить себя: «Почему я не могу просто использовать прямую ссылку на шрифт?» Шрифты Google часто обновляются, поэтому вы можете довольно быстро загрузить шрифт по ссылке, которой больше не существует. 🤦🏾

Вторая проблема, с которой мы сталкиваемся в Google Fonts, заключается в том, что мы не можем контролировать отображение невидимого текста (FOIT) и отображение нестилизованного текста (FOUT) во время загрузки шрифтов. Установка свойства font-display в @font-face даст нам этот контроль, но он определен в таблице стилей Google Fonts.

FOIT в действии — обратите внимание на отсутствующий текст панели навигации на скриншоте диафильма (урезано до медленного 3G)

Наконец, хотя и редко, но если Google Fonts не работает, мы не получим наши шрифты. Если наш собственный CDN не работает, то, по крайней мере, мы постоянно ничего не доставляем нашим пользователям, верно? 🤷🏻️

Единственное базовое улучшение производительности, которое мы можем сделать с помощью хостинга Google Fonts, — это ускорить поиск DNS, рукопожатие TCP и согласование TLS с доменом fonts.gstatic.com с предварительным подключением:

Почему? Если вы не прогреваете соединение, браузер будет ждать, пока он не увидит файлы шрифтов вызова CSS, прежде чем начать DNS/TCP/TLS:

Загрузка Google Fonts без предварительного подключения

Это напрасная трата времени, потому что мы ЗНАЕМ, что нам обязательно понадобятся ресурсы с fonts. gstatic.com. Добавляя преконнект, мы можем выполнять DNS/TCP/TLS до того, как понадобится сокет, тем самым продвигая эту ветвь водопада:

Загрузка шрифтов Google с преконнектом к fonts.gstatic.com контроль над нашими файлами шрифтов, загрузкой и свойствами CSS. К счастью, Марио Ранфтл создал google-webfonts-helper, который помогает нам в этом! Это замечательный инструмент для предоставления нам файлов шрифтов и объявлений шрифтов на основе выбранных вами шрифтов, наборов символов, стилей и поддержки браузера.

https://sia.codes/posts/making-google-fonts-faster/

Шаг 1. Используйте google-webfonts-helper для загрузки наших шрифтов и предоставления базовых объявлений шрифтов CSS

Сначала выберите Google нужный вам шрифт с левой боковой панели. Введите в поле поиска отфильтрованный список (красная стрелка), затем щелкните свой шрифт (синяя стрелка):

Шаг 1: Выберите шрифт.

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

Выберите свои наборы символов и стили (насыщенность и стиль).

Различные шрифты имеют разные уровни поддержки символов и параметры стиля. Например, Open Sans поддерживает гораздо больше наборов символов, чем Muli:

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

Ваш окончательный выбор — какие браузеры вы хотите поддерживать. «Современные браузеры» предоставят вам форматы WOFF и WOFF2, а «Лучшая поддержка» также предоставит вам TTF, EOT и SVG. В нашем случае мы решили разместить только WOFF и WOFF2, выбрав системные шрифты в качестве запасных вариантов для старых браузеров. Работайте со своей командой дизайнеров, чтобы выбрать лучший вариант для вас.

Выберите «Лучшая поддержка» для всех форматов файлов или «Современные браузеры» только для WOFF и WOFF2.

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

Наконец, загрузите свои файлы. Разархивируйте их и поместите в свой проект в соответствующее место.

https://sia.codes/posts/making-google-fonts-faster/

Шаг 2: оптимизация загрузки

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

Мы можем сделать это с помощью подсказки ресурса preload :

Preload — это декларативная выборка, позволяющая заставить браузер сделать запрос на ресурс, не блокируя событие загрузки документа.

— из «Предварительная загрузка, предварительная выборка и приоритеты в Chrome» Адди Османи

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

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

Добавьте в свой HTML-файл подсказки ресурсов для всех файлов шрифтов WOFF2, необходимых для текущей страницы:

Давайте разберем наш элемент preload :

• rel="preload" указывает браузеру декларативно извлекать ресурс, но не «выполнять» его (наш CSS будет использовать очередь).
• as="font" сообщает браузеру, что он будет загружать, чтобы он мог установить соответствующий приоритет. Без него браузер установил бы низкий приоритет по умолчанию.
• type="font/woff2 сообщает браузеру тип файла, чтобы он загружал ресурс только в том случае, если он поддерживает этот тип файла.
• crossorigin требуется, поскольку шрифты извлекаются с использованием анонимного режима CORS.

Итак Как мы справились? Давайте посмотрим на производительность до и после. Используя webpagetest.org в простом режиме (Moto G4, Chrome, медленный 3G), наш индекс скорости составил 4,147 с при использовании только предварительного подключения и 3,388 с при использовании самостоятельного хостинга. плюс предварительная загрузка. Водопады для каждого показывают, как мы экономим время, играя с задержкой:

Загрузка из Google с предварительным подключением к fonts.gstatic.com Самостоятельное размещение шрифтов и использование предварительной загрузки

Шаг 3. Исправление FOIT и FOUT (необязательно)

https://sia.codes/posts/making-google-fonts-faster/

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

Если у вас все в порядке с FOUT или мельканием нестилизованного текста, то мы можем исправить FOIT, добавив font-display: swap; к нашим объявлениям @font-face .

Проверьте все варианты шрифтов-отображения на этой веселой игровой площадке Glitch от Моники Динкулеску.

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

Вы поклонник Гэтсби? Для него даже есть плагин подшрифта.

https://sia.codes/posts/making-google-fonts-faster/

Размещение статических ресурсов в CDN

Google Fonts предлагает быструю и надежную сеть доставки контента (CDN). Вы также должны разместить свои статические ресурсы в CDN для более быстрой доставки пользователям в разных регионах. Мы используем AWS S3 плюс Cloudfront, сервис CDN, предлагаемый Amazon, но существует множество вариантов.

Размер и популярные шрифты

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

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

— от Web Font Optimization by Ilya Grigorik

Кроме того, в кеше ваших пользователей могут существовать очень популярные шрифты, такие как Open Sans и Roboto. Надеюсь, в следующем посте я смогу изучить данные HTTPArchive и дать вам представление о том, какие шрифты наиболее популярны.

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

Хотите увидеть весь пример кода и результаты производительности? Вот репо.

Предварительная загрузка, предварительная выборка и приоритеты в Chrome

Сегодня мы углубимся в понимание сетевого стека Chrome, чтобы прояснить, как примитивы веб-загрузки (такие как…

medium.com

Оптимизация веб-шрифтов | Веб-основы | Разработчики

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

Developers.google.com

Font-display Playground

Крутая вещь, сделанная с помощью Glitch

font-display.glitch.me

14 лучших шрифтов Google s Для сильных заголовков и заголовки — csshint

Как веб-дизайнер, вы, вероятно, хорошо знаете, что отличные шрифты необходимы для отличного дизайна. Эта статья посвящена шрифтам. Мы собрали 14 невероятных Google Web Fonts , который делает ваш заголовок или заголовок вашего веб-сайта привлекательным. Дело в том, что заголовки важнее, чем вы думаете. и Многие дизайнеры также согласны с этим.

Google Webfonts — крупнейший источник бесплатных шрифтов с сотнями начертаний на выбор. Google Fonts , запущенный в 2010 году, помогает решить эту проблему, и это фантастический ресурс. Я не буду заставлять вас больше ждать, поэтому вот список 14 лучших веб-шрифтов Google для Сильные заголовки и заголовки:

1.Bree Serif

Bree был первоначально выпущен в 2008 году. Этот дружественный вертикальный курсив является двоюродным братом отмеченного наградами семейства Bree от TypeTogether. Дизайн Вероники Буриан и Хосе Скальоне.

2.Montserrat

Старые плакаты и вывески в традиционном районе Монтсеррат в Буэнос-Айресе вдохновили Джульетту на разработку этого шрифта и спасение красоты городской типографики, появившейся в первой половине двадцатого века.
Обновлено в январе 2017 г.: семейство было перерисовано и дополнено полным набором весов.

3.Open Sans

Open Sans — гуманистический шрифт без засечек, разработанный Стивом Маттесоном.
Он был оптимизирован для печати, Интернета и мобильных интерфейсов и имеет отличные характеристики разборчивости букв.

4.merriweather

Merriweather был разработан, чтобы быть текстовым шрифтом, который приятно читать на экране. Разработанный Эбеном Соркиным, Merriweather имеет очень большую высоту x, слегка сжатые буквы

5.raleway

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

6.Roboto Slab

Roboto имеет двойную природу. У него механический скелет, а формы в основном геометрические.

7.Source Sans Pro

Source® Sans Pro, первое семейство шрифтов Adobe с открытым исходным кодом, разработанное Полом Д.

8.Ubuntu

Семейство шрифтов Ubuntu представляет собой набор соответствующих новых бесплатных/открытых шрифтов, разрабатывавшихся в течение 2010-2011 гг.