Google web fonts: Google Fonts | Google for Developers

Разгоняем Google Fonts

Главным источником контента в вебе по-прежнему остается текст, значит разработчики должны уделять большое внимание его отображению на сайте. Сейчас многие проблемы веб-шрифтов остались в прошлом, и все силы брошены на увеличение их производительности и скорости рендеринга. Браузеры стандартизировали стратегии загрузки FOUT/FOIT, а новая спецификация font-display позволяет управлять ими.

Self-hosted vs Google Fonts

Самым быстрым вариантом остается хранение файлов шрифтов вместе с файлами самого сайта (self-hosted fonts).

• Загрузка с того же источника (same origin) происходит быстрее.
• Адрес файлов точно известен, а значит можно воспользоваться механизмами предварительной загрузки (preload).
• Можно установить собственные директивы управления кэшированием (cache-control).
• Меньше рисков, связанных со взаимодействием со сторонними источниками (сбои в работе, безопасность и т. д.)

Тем не менее многие разработчики предпочитают использовать Google Fonts для работы с веб-шрифтами – почему?

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

font-display (параметр &display=swap в URL). К тому же это огромная библиотека шрифтов со свободным доступом.

Поэтому мы не спешим отказываться от Google Fonts, но можно ли улучшить их – и без того высокую – производительность?

Как разогнать Google Fonts?

Если вы используете font-display для Google Fonts, то имеет смысл асинхронно загрузить всю цепочку запросов

font-display: swap – это уже огромный шаг вперед в деле производительности, но что, если мы можем сделать еще больше?

Harry Roberts, основатель csswizardry, решил поставить эксперимент и сравнить разные способы загрузки Google Fonts. В качестве плацдарма для испытаний выступили его сайты – harry.is и домашняя страница csswizardry.com.

Harry проверил 5 техник:

1. Загрузка шрифтов с Google Fonts по старинке, без использования font-display.
2. Дефолтная загрузка с font-display: swap.
3. Асинхронная загрузка файла Google Fonts.
4. Предварительная загрузка CSS-файла с помощью preload для повышения его приоритета.
5. Установка соединения с доменом fonts.gstatic.com с помощью preconnect.

Каждая техника является аддитивной – включает в себя все предыдущие и вносит некоторые новые улучшения. Нет смысла пробовать, например, preload сам по себе, ведь комбинация в любом случае будет работать лучше.

Тестирование

Для каждого теста Harry измерял 5 показателей:

• First Paint (FP). Влияние на критический путь рендеринга.
• First Contentful Paint (FCP). Скорость появления первого значимого контента – не только шрифтов.
• First Web Font (FWF). Загрузка первого веб-шрифта.
• Visually Complete (VC). Визуальная стабилизация макета – показатель, неэквивалентный Last Web Font (LWF).
• Оценка Lighthouse. Разве можно воспринимать серьезно тесты без показателей Lighthouse? 🙂

Все тесты были проведены с использованием приватного экземпляра WebPageTest на Samsung Galaxy S4 через 3G соеднинение. К сожалению, на момент тестирования сервис был недоступен, поэтому у нас нет публичных ссылок с результатами.

Чтобы код было удобнее читать, фрагмент ссылки на Google Fonts https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700 заменен на $CSS.

По старинке

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

&display=swap, который автоматически добавляет во все правила @font-face свойство font-display: swap. Кроме swap поддерживаются значения optional, fallback и block.

Для первого теста Harry отбросил этот параметр, чтобы получить подходящую базу для сравнения.

Сниппет подключения шрифтов:

<link rel="stylesheet" href="$CSS" />
    

Здесь есть два ключевых момента:

1. CSS-файл со стороннего домена загружается синхронно, а следовательно блокирует рендеринг страницы.
2. Инструкции @font-face в файле не содержат правил font-display.

Это одно синхронное действие поверх другого – очень плохое сочетание для производительности веб-страницы.

Результаты теста без font-display

Эти результаты можно принять за исходную точку.

На обоих сайтах файл Google Fonts был единственным блокирующим рендеринг ресурсом, поэтому показатель First Paint (FP) у них одинаковый.

Lighthouse выдал одну ошибку и одно предупреждение:

• (Ошибка) Убедитесь, что текст остается видимым во время загрузки веб-шрифтов.
• (Предупреждение) Устраните ресурсы, блокирующие рендеринг страницы.

Первая ошибка вызвана отсутствием стратегии загрузки шрифтов (например, правила font-display). Второе предупреждение связано с синхронной загрузкой CSS-файла Google Fonts.

Отсюда начинаем двигаться дальше и вносить прогрессивные изменения.

font-display: swap

Теперь Harry вернул обратно параметр &display=swap. По сути это делает загрузку шрифтов асинхронной – браузер отображает резервный шрифт, так что пользователи не сталкиваются с мельканием невидимого текста (FOIT).

Эта стратегия становится еще лучше, если вы подберете подходящий резервный шрифт – в идеале он должен быть похожим на окончательный вариант. Ведь резкая смена Times New Roman на Open Sans вряд ли намного лучше FOIT. К счастью, есть удобный инструмент для подбора fallback-шрифтов: Font Style Matcher.

Сниппет подключения шрифтов:

<link rel="stylesheet" href="$CSS&display=swap" />
    

Результаты теста с font-display: swap

Блокирующие рендеринг ресурсы никуда не делись, поэтому улучшений показателя First Paint (FP) ожидать не приходится. На самом деле он даже немного просел на CSS Wizardry. Однако сразу бросается в глаза резкое улучшение First Contentful Paint (FCP) – больше чем на секунду на harry.is. При этом время загрузки первого веб-шрифта (FWF) в одном случае немного улучшилось, а в другом – наоборот. Показатель Visually Complete (VS) увеличился на 200 мс.

Lighthouse теперь выдает только одно предупреждение:

• (Предупреждение) Устраните ресурсы, блокирующие рендеринг страницы.

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

Асинхронный CSS

Асинхронная загрузка CSS-файла – это ключевой момент в улучшении производительности. Существует несколько способов этого добиться, но самый простой – это, пожалуй, трюк с media=»print» от Filament Group.

Атрибут media="print" указывает браузеру, что файл стилей предназначен только для печати, поэтому его загрузка не должна блокировать рендеринг. Однако сразу после загрузки значение атрибута меняется на all – и стили применяются к самой странице.

Сниппет подключения шрифтов:

<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" 
      onload="this.media='all'" />
    

Этот трюк ужасно прост, но у него есть свои минусы.

Дело в том, что обычная синхронная таблица стилей блокирует рендеринг страницы, поэтому браузер назначает ей наивысший приоритет (Highest) при загрузке. А вот стилям для печати – самый низкий (Idle).

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

Для примера возьмем сайт Vitamix с асинхронной загрузкой CSS файла:

Хотя Chrome может выполнять асинхронные DNS/TCP/TLS-запросы, при более медленных соединениях все некритичные запросы будут останавливаться

Браузер делает именно то, что мы ему сказали: запрашивает CSS-файлы с приоритетом стилей для печати. При 3G-соединении загрузка занимает более 9 секунд! Практически все остальные ресурсы грузятся раньше. Значит правильный шрифт появится только через 12,8 секунд после начала загрузки страницы!

К счастью, в случае с веб-шрифтами это не конец света. Мы всегда должны быть в состоянии справиться и без них, используя резервные варианты. Пользовательский шрифты – это прогрессивное усиление. Если ожидается такая длительная загрузка, нужно использовать правило font-display: optional.

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

Итак, что же с нашим тестом?

Результаты теста с асинхронной загрузкой CSS-файла

Результаты потрясающие!

Улучшение показателей First Paint и First Contentful Paint просто ошеломляюще по сравнению с предыдущими тестами. Оценка Lighthouse достигла 100 баллов.

Если говорить о критическом пути рендеринга, то это большая победа оптимизации.

Однако – и это важно – из-за хака с атрибутом media на CSS Wizardry просело время загрузки первого веб-шрифта (FWF).

Итак, асинхронный CSS – это хорошая идея, но нужно как-то решить проблему снижения приоритета.

preload

Нам нужен асинхронный запрос с высоким приоритетом – обратимся к предварительной загрузке (preload), которая уже неплохо поддерживается практически во всех современных браузерах. Объединим ее с отлично поддерживаемым print-хаком и получим лучшее от обеих техник, одновременно обеспечив фоллбэк.

Сниппет подключения шрифтов:

<link rel="preload"
      as="style"
      href="$CSS&display=swap" />
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" 
      onload="this.media='all'" />
    

Результаты теста с предварительной загрузкой CSS-файла (preload)

Показатели First Paint и First Contentful Paint почти не изменились, однако время загрузки первого веб-шрифта (FWF) на CSS Wizardry уменьшилось на 600 мс!

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

Что касается CSS Wizardry, то ухудшение времени First Paint на 200 мс больше похоже на аномалию, так как изменение приоритета асинхронного CSS файла не должно было оказать влияния на рендеринг. Остальные же показатели существенно улучшились.

preconnect

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

Google Fonts использует HTTP-заголовок для установки предварительного соединения с доменом fonts.gstatic.com:

Однако выполнение этого заголовка связано с TTFB (Time to First Byte, время до первого байта) ответа, которое может быть очень большим. Среднее значение TTFB, включая очередь запросов, DNS, TCP, TLS и серверное время, для CSS-файла Google Fonts во всех тестах составило 1406 мс. При этом среднее время загрузки самого CSS-файла – около 9,5 мс – в 148 раз меньше!

Иначе говоря, несмотря на то, что Goggle пытается установить предварительное соединение с доменом fonts. gstatic.com, это дает лишь около 10 мс форы. Этот файл привязан к задержке, а не к пропускной способности.

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

Сниппет подключения шрифтов:

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" 
      onload="this.media='all'" />
    

Мы можем визуализировать эти изменения на WebpPageTest:

Результаты теста с предварительным подключением к домену fonts.gstatic.com

Показатели First Paint и First Contentful Paint не изменились – preconnect влияет только на ресурсы, загружаемые после критического пути.

Зато время загрузки первого веб-шрифта (FWF) и показатель визуальной завершенности (VC) существенно уменьшились!

Оценки Lighthouse тоже хороши – 99 и 100.

Бонус: font-display: optional

Использование асинхронной загрузки CSS-файла и свойства font-display не позволяют избежать FOUT (мелькания неоформленного текста) или, в лучшем случае, FOFT (мелькания синтезированного текста), если вы хорошо подобрали резервный шрифт. Чтобы смягчить этот эффект, Harry попробовал подключить шрифт с опцией font-display: optional.

Этот параметр ограничивает время, в течение которого резервный шрифт может быть заменен на основной. Таким образом, если ваш веб-шрифт грузится слишком долго, то он просто не будет использован. Это позволит избежать эффекта FOUT, что обеспечивает лучший пользовательский опыт при взаимодействии с сайтом и хороший показатель Cumulative Layout Shift (сдвиг макета).

Однако эта техника плохо сочетается с асинхронной загрузкой CSS.

Когда значение атрибута media изменяется с print на all, браузер обновляет CSSOM и применяет его к DOM. В этот момент страница узнает, что ей нужны некоторые веб-шрифты, и начинается чрезвычайно малый период блокировки с мельканием невидимого текста (FOIT) на половине загрузки страницы. Еще хуже, если браузер заменит невидимый текст снова резервным, так что пользователь даже не получит преимуществ нового шрифта. В общем, это очень похоже на баг.

Выглядит это примерно вот так:

А вот видео, демонстрирующее проблему в DevTools:

Ссылка на видео

Не следует использовать font-display: optional в сочетании с асинхронной загрузкой CSS-файлов. В целом лучше иметь неблокирующий CSS с FOUT, чем ненужный FOIT.

Сравнения и визуализации

На этих замедленный видео хорошо видна разница между разными техниками загрузки Google Fonts.

harry.is

Ссылка на видео

1. В тестах с асинхронной загрузкой CSS, preload и preconnect рендеринг начинается через 1.8 сек. Также представлен показатель First Contentful Paint.(первое отображение контента).
2. В первых двух тестах (без font-display и с font-display: swap) рендеринг страницы начинается через 3.4 сек. В первом тесте наблюдается мелькание невидимого текста (FOIT).
3. В последнем тесте с preconnect веб-шрифт грузится через 3. 8 сек, а визуальная завершенность макета наступает через 4.4. сек.
   
4. В первом тесте время первого существенного отображения (First Contentful Paint) и время загрузки первого шрифта (First Web Font) одинаковы – 4.5 сек – так как все загружается синхронно.
5. Визульная завершенность в базовом тесте наступает через 5 сек.
6. В тесте с асинхронной загрузкой CSS – через 5.1 сек.
7. В тесте с font-display: swap – через 5.2 сек.
8. В тесте с preload – через 5.3s.

CSS Wizardry

Ссылка на видео

1. В тесте с асинхронной загрузкой CSS рендеринг начинается через 1. 7 сек.
2. В тесте с preconnect – через 1.9 сек. Показатель First Contentful Paint также равен 1.9.
3. В тесте с preload рендеринг начинается через 2 сек, и время First Contentful Paint тоже равно 2 сек.
4. В базовом тесте рендеринг начинается через 3.4 сек.
5. В тесте с font-display: swap показатели FP и FCP равны 3.6 сек.
6. Также через 3.6 сек наступает визуальная завершенность в тесте с preconnect.
7. В базовом тесте показатель FCP составляет 4.3 сек.
8. Также через 4.3 сек достигается визуальная завершенность в тесте с preload.
9. Через 4.4 сек – в базовом тесте.
10. Через 4.6 сек – в тесте с font-display: swap.
11. Через 5 сек – в тесте с асинхронной загрузкой CSS.

Таким образом, техника с preconnect оказалась самой быстрой.

Находки

Хотя self-hosted шрифты, кажется, остаются самым лучшим решением всех проблем производительности и доступности, Google Fonts имеет свои преимущества. К тому же мы можем со своей стороны улучшить работу этого сервиса.

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

Если вы подключаете на странице другие блокирующие рендеринг ресурсы или нарушаете принципы быстрого CSS, то ваши показатели могут существенно отличаться от тестовых.

Особенно полезны будут эти оптимизации в проектах, в которых Google Fonts является одним из самых узких мест в обеспечении производительности.

Сниппет асинхронной загрузки Google Fonts

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

<!-- Прогрев домена статики -->
<link rel="preconnect"
      href="https://fonts. gstatic.com"
      crossorigin />
<!-- Асинхронная предзагрузка CSS файла с высоким приоритетом -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />
<!-- Неблокирующая загрузка CSS-файла с низким приоритетом -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />
<!-- Фоллбэк при отключенном JavaScript -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>
    

Почему шрифты Google на самом деле не являются открытым исходным кодом

Почему шрифты Google на самом деле не являются открытым исходным кодом

Одним из основных побудительных мотивов для размышлений о существенных качествах открытого исходного кода был проект Google Fonts, претендующий на звание библиотеки с открытым исходным кодом. -исходные шрифты. Я проектирую тип. Я участвую в проектах с открытым исходным кодом. Я был заинтригован концепцией. Нет никаких причин, по которым шрифты с открытым исходным кодом не могут существовать. Но при ближайшем рассмотрении Google Fonts не являются «открытым исходным кодом» в каком-либо значимом смысле.

Я написал несколько предыдущих комментариев (здесь и здесь) о Google Fonts в рамках обсуждения Roboto, нового шрифта для Android. Далее следует более подробная критика Google Fonts, но также и призыв к Google работать лучше. Они могут и должны.

Откуда я знаю, что они могут? На инженерной арене Google показал себя хорошим гражданином мира с открытым исходным кодом. Например: Питон. В течение семи лет в Google работал создатель Python и доброжелательный диктатор Гвидо ван Россум. По словам Гвидо, ему пришлось «потратить половину [своего] времени на Python, без каких-либо условий [.]». Google принял Python в качестве своего «основного языка сценариев». Google выпустил исходный код и библиотеки Python. Помимо Python, Google ведет целый блог, посвященный своей деятельности с открытым исходным кодом. Даже команда Google Fonts выпустила открытый исходный код для чтения и редактирования шрифтов.

Но чего вы не найдете ни в блоге Google с открытым исходным кодом, ни на его веб-сайте программ с открытым исходным кодом, так это упоминания самих шрифтов Google. Это странно, потому что, по словам Google, «все шрифты с открытым исходным кодом». Правда? Это упущение предполагает, что Google может сомневаться в том, что эти шрифты можно квалифицировать как открытый исходный код.

Я уверен, что нет. Чтобы доказать это, я пройдусь по моим семи основным качествам открытого исходного кода (включая дихотомию разбавления-реальности, представленную в этой статье). Я объясню, почему Google Fonts терпит неудачу и что Google может сделать для улучшения программы.

Основное качество #1
Разбавление : Открытый исходный код возникает из духа свободы и сотрудничества.
Реальность : Открытый исходный код возникает из духа капиталистической конкуренции.

Неслучайно Google запустил свой проект веб-шрифтов в мае 2010 года, в тот же период, когда другие конкурирующие сервисы (такие как Typekit и Webtype) также начали свою работу. Также не случайно эта попытка возникла во время кампании Google, направленной на то, чтобы стать более ориентированной на платформу, а не на приложения, создавая Android, Chrome OS и Google Docs. Проекты шрифтов Droid и Roboto — самые яркие примеры платформенно-ориентированных шрифтов.

Итак, давайте согласимся, что Google использует Google Fonts в первую очередь потому, что это отвечает конкурентным интересам Google. Это не альтруизм. И эти шрифты «бесплатны» только в том тривиальном смысле, что Google не взимает с нас плату за их использование. Но Google всегда находит другие способы конвертировать наше внимание в доход, либо напрямую (продажа рекламы), либо косвенно (распространение открытого исходного кода). Эти предприятия прибыльны для Google, потому что наше коллективное внимание экономически ценно. Вот почему Google — компания стоимостью 200 миллиардов долларов.

Мои жалобы на проект Google Fonts не в том, что Google получает от него выгоду. Нет ничего плохого в том, чтобы зарабатывать деньги с открытым исходным кодом. Многие компании делают. Дело в том, что Google пытается притвориться, что это не так, поднимая флаг свободы и делясь:

«Мы считаем, что не должно быть никаких препятствий для создания отличных веб-сайтов… вы можете свободно делиться своими любимыми с друзьями и коллегами… Если вы занимаетесь дизайном шрифты и хотели бы внести свой собственный дизайн, пожалуйста, свяжитесь с нами…»

Это лицемерие. Google не заботятся о «барьерах на пути к созданию отличных веб-сайтов». Google заботится о Google. Это также противоречит обычной политике Google, заключающейся в том, чтобы не скрывать, как он зарабатывает деньги. Когда Google размещает рекламу на странице, нет никакого лукавства в отношении того, что это такое и почему оно там. Почему в данном случае Google разыгрывает свои карты близко к жилету? Что подводит нас к следующему пункту:

Основное качество #2
Разведение : Разработчики с открытым исходным кодом работают бесплатно.
Реальность : Разработчикам с открытым исходным кодом платят.

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

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

В мире дизайна хорошо известна афера, когда престижный, но скупой клиент говорит: «Я хотел бы заплатить вам, но у меня нет бюджета. Как насчет того, чтобы позволить мне использовать вашу работу бесплатно? Я знаю, что это станет для вас отличным разоблачением и приведет к оплачиваемой работе». На самом деле его нет и не будет. Скорее, это просто добродушный развод, эксплуатация более слабого более сильным. Тем не менее, это работает, потому что всегда найдутся дизайнеры, достаточно голодные, чтобы поверить, что у них нет другого выбора.

Google Fonts использует вариант этой токсичной строки как часть своей презентации потенциальным авторам шрифтов с открытым исходным кодом:

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

Здесь Google использует приманку для «миллионов людей» в качестве стимула, чтобы заставить дизайнеров вкладывать свое время и свою работу по цене ниже ее рыночной стоимости, и все это ради удовольствия быть участником открытого исходного кода.

Справедливости ради следует отметить, что в прошлом году Google прилагал больше усилий, чтобы платить дизайнерам. Один подрядчик Google Fonts сказал мне, что они предлагают 500-3000 долларов за шрифт. Предположим, что Google платит вам в середине этого диапазона (1750 долларов) за каждый стиль в семействе шрифтов из четырех стилей, или всего 7000 долларов. Предположим также, что вы потратили на этот проект три месяца. Как вы думаете, сопоставимо ли это с тем, что получает веб-дизайнер, нанятый Google, включая льготы, медицинское обслуживание, опционы на акции и т. д. за тот же трехмесячный период? Явно нет.

Как Google может стать лучше? Одна из моделей заключается в том, чтобы платить рыночные расценки за услуги по дизайну шрифтов, а затем публиковать результаты под открытой лицензией. Это была модель шрифтов Droid, созданная компанией Monotype Imaging. Это было бы улучшением, но не особенно открытым исходным кодом в духе.

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

Основное качество #3
Разбавление : Открытый исходный код делает вещи бесплатными.
Реальность : Открытый исходный код переопределяет то, что является ценным.

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

Компания Google также упустила суть, выпустив сотни шрифтов бесплатно, не создав соответствующей ценности где-либо еще. В этом отношении Google Fonts не является частью линии проектов с открытым исходным кодом, а скорее проектов по обмену файлами, таких как 1001 Free Fonts, которые руководствуются принципом «Вот куча бесполезной хрени, которая вам понравится, потому что она бесплатна». ».

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

Как Google может стать лучше? Предлагая последовательную концепцию того, как Google Fonts может переопределить ценность на рынке шрифтов. В мире уже полно бесполезных бесплатных шрифтов. Google Fonts здесь не прокладывает себе путь.

У Google есть несколько вариантов. Я думаю, что Google Fonts может быть интересной возможностью обучения для начинающих дизайнеров шрифтов, которые не могут бросить все и переехать в Берлин или Нью-Йорк (или другой городской центр), чтобы изучить ремесло. Таким образом, это будет похоже на то, как проекты программного обеспечения с открытым исходным кодом предоставляют инженерам без сильного резюме возможность учиться и вносить свой вклад. Но ценность этого механизма целиком зависит от следующего пункта:

Основное качество #4
Разбавление : Открытый исходный код не имеет препятствий для участия.
Реальность : Открытый исходный код опирается на меритократии.

Я упомянул об этом выше, но сейчас самое время полностью признать неизбежную истину: по профессиональным меркам средний шрифт Google просто ужасен. Некоторые лучше, чем другие, но почти все становятся жертвами по крайней мере одного фатального недостатка: они уродливы, неполны, плохо нарисованы, плохо расположены, дилетантски или просто непригодны для использования. И я говорю это не для того, чтобы критиковать самих дизайнеров. Они в восторге от шрифтового дизайна. Но этот энтузиазм следует направить на улучшение их навыков и создание лучших шрифтов. Сейчас это не так. И гугл не помогает.

Если вы считаете несправедливым сравнивать Google Fonts с профессиональными шрифтами, извините, но это способ с открытым исходным кодом. (См. также Essential Quality #1.) Вариант с открытым исходным кодом актуален только в том случае, если он может конкурировать с качеством проприетарной версии. Выпускает ли Google тонны низкокачественного кода с открытым исходным кодом? Нет. Он соответствует профессиональным стандартам с открытым исходным кодом. Google должен принять аналогичные стандарты для шрифтов.

Как Google может стать лучше? Это просто: меньше шрифтов, выше качество. Необходимость новых шрифтов никогда не вызывает сомнений. Время проходит. Технология развивается. Требования меняются. В последнем поколении такие компании, как Apple и Microsoft, инвестировали большие суммы в создание системных шрифтов, на которые миллионы людей полагаются в течение 20 лет. У Google есть возможность взять на себя эту роль, если он захочет.

Но для создания качественных шрифтов нужны качественные дизайнеры. Открытый исходный код не означает «открытый для всех». Это означает «открыт для всех, кто может работать в соответствии с необходимым стандартом». Если Google хочет качества, Google Fonts не может оставаться открытым для всех, кто хочет раздать шрифт бесплатно.

Основное качество #5
Разбавление : Открытый исходный код демократичен.
Реальность : Открытый исходный код полагается на доброжелательных диктаторов.

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

Три результата:

1. Google получит шрифты профессионального качества по более низкой цене, чем проприетарная разработка.

2. Шрифтовые дизайнеры сообщества будут работать с профессиональными дизайнерами шрифтов (что является лучшим способом улучшить свои навыки).

3. Google выпустит в мир подлинные активы с открытым исходным кодом, и этого будет достаточно, чтобы вдохновить на дальнейшее развитие. Например, свободно доступный шрифт Charter, разработанный уважаемым Мэтью Картером в 1987 — легла в основу Charis SIL. Были ли какие-либо текущие шрифты Google Fonts адаптированы аналогичным образом?

«Но по этой схеме будет использовано гораздо меньше дизайнеров». Да. В этом-то и дело. Доброжелательные диктаторы выбирают самые достойные вклады. Открытый исходный код — это не ночь открытого микрофона. У тех, кто хочет выпустить шрифт бесплатно, всегда будет масса вариантов. Неправда, что любой имеет право участвовать в проекте с открытым исходным кодом. Если вы не согласны, позвоните мне, пожалуйста, Гвидо ван Россум, потому что я хочу, чтобы он добавил клингонские команды в основной синтаксис Python. И единорог ASCII для каждого исходного файла.

Основное качество #6
Разбавление : Проект с открытым исходным кодом может иметь одного разработчика.
Реальность : Проект с открытым исходным кодом требует нескольких разработчиков.

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

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

Основное качество #7
Разбавление : Программный проект может быть открыт в любое время.
Реальность : Открытый исходный код является частью ДНК проекта или нет.

Теоретически нет никаких причин, по которым шрифты с открытым исходным кодом не могут существовать и не могут быть хорошими. Я предполагаю, что Google искренне хочет делать шрифты с открытым исходным кодом в своей ДНК, а не просто «Еще 1001 бесплатный шрифт».

Но если это так, Google должен изменить свой подход. Я уже говорил, что «у Google отличная инженерная культура, слабая культура дизайна и отсутствие ярко выраженного вкуса». Я придерживаюсь этого. Чтобы получить другие результаты, Google должен будет подходить к шрифтам с открытым исходным кодом таким образом, чтобы использовать его сильные стороны (инженерные разработки) и избегать его слабых сторон (дизайн и вкус). Сосредоточиться на меньшем количестве шрифтов и нанять доброжелательных диктаторов из индустрии профессионального шрифтового дизайна было бы хорошим первым шагом. Даже Microsoft смогла преодолеть свой дефицит вкуса, чтобы сделать Verdana, которая сейчас находится в Музее современного искусства.

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

Также возможно, что Google с его культурным уклоном в сторону инженерии просто не признает, что навыки шрифтового дизайна существуют и имеют ценность. Если это так, Google Fonts останется Costco типографики: всегда становится больше, но никогда не становится лучше. Если это окажется в интересах Google, хорошо. Но, пожалуйста, Google — не называйте это открытым исходным кодом. Вы знаете лучше. И мы тоже.

Обновление, почти четыре года спустя

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

Многие из веб-шрифтов, которые мы видим сегодня, являются грубыми бесплатными шрифтами? Да. И многие из них из Google Fonts? Тоже да. Но как шрифтовой дизайнер я бы предпочел, чтобы люди использовали грубые бесплатные шрифты, а не системные. Почему? Потому что это требует от них преодоления инерции покоя — «зачем мне использовать веб-шрифты, когда у меня есть Грузия?» Этот первый шаг является большим. В конце концов, некоторым из этих людей надоест их убогие веб-шрифты, и тогда они будут искать на рынке более качественные. Чего они не найдут в Google Fonts.

Как и многие современные технологические компании, Google любит изображать свои самые посредственные достижения как произведения революционного гения. (В конце концов, специалисты по связям с общественностью дешевле, чем инженеры.) Во время всплеска Google Fonts в 2012 году меня беспокоило то, что Google может попытаться переопределить рынок шрифтов в соответствии со своими собственными низкими стандартами, подобно тому, как Amazon определила рынок электронных книг с помощью ужасных Разжечь.

К счастью, этого не произошло. Kindle — ключевой проект для Amazon. Напротив, шрифты всегда были для Google второстепенной задачей. В течение следующих нескольких лет Google Fonts продолжал выпускать десятки и десятки довольно плохих шрифтов. (Нередко можно было увидеть статьи с такими заголовками, как «Веб-шрифты Google, которые не отстой».)

Возможно, самое худшее, что случилось с Google Fonts, это то, что их основная идея, а именно, что количество важнее качества, была опровергнута. В 2012 году Adobe выпустила Source Sans и Source Code — два шрифта с открытым исходным кодом, которые на самом деле были весьма хороши. В следующем году Mozilla выпустила Fira, который, по моему мнению, был одним из лучших шрифтов 2013 года.

Тем не менее, остается неясным, может ли шрифт быть осмысленно «открытым исходным кодом» помимо наличия открытой лицензии. На презентации на TypeCon 2013 после выпуска Source Sans и Source Code дизайнеры Adobe скорбно задавались вопросом: «Почему мало людей вносят свой вклад?» Я был там — в самый лучший день вызвать сочувствие к компании стоимостью 45 миллиардов долларов сложно. Но системный ответ может заключаться в том, что аудиторией большинства программных инструментов с открытым исходным кодом являются другие разработчики программного обеспечения, которые, по крайней мере, могут внести свой вклад. Принимая во внимание, что со шрифтами аудитория конечных пользователей включает несколько (если вообще) дизайнеров шрифтов.

В какой-то момент мне сказали, что моя критика шрифтов Google привела к изменениям в их процессе проектирования, чтобы они стали более открытыми и инклюзивными. Да, верно, что угодно. Послушайте, Google — скрытный корпоративный гигант. Взаимодействие Google с открытым исходным кодом — отчасти театральный жест, столь же циничный, как и его геометрический логотип карамельного цвета. Цель обсуждения Google Fonts заключалась не в том, чтобы помочь Google. (Как будто их волнует, что я думаю.) Скорее, это должно было побудить шрифтовых дизайнеров, которые думали об участии в проекте, критически осмыслить затраты и выгоды. Потому что, в конечном счете, Google занимается открытым исходным кодом, как McDonald’s занимается защитой животных.

— Мэтью Баттерик
январь 2012 г. и ноябрь 2015 г.

между прочим

• Еще несколько слов о том, как качество порождает качество в творческих начинаниях, и как для Google типографика является частью экономики рекламы, а не экономики создателей .

• В декабре 2016 года Google объявил о «Проекте улучшения шрифтов Google» — делайте выводы сами.

• См. бесплатные шрифты для шрифтов с открытым исходным кодом, которые не ужасны.

Как использовать шрифты Google в вашем следующем проекте веб-дизайна | Хайден Миллс | Мы переехали на freeCodeCamp.org/news

Опубликовано в

·

6 минут чтения

·

8 марта 2018 г.

Итак, вы, наверное, слышали, что у Google готовы сотни бесплатных веб-шрифтов быть использовать для вашего следующего проекта. Но как вы используете их на своем сайте? Эта статья проведет вас через шаги, которые нужно предпринять, чтобы запустить их на вашем веб-сайте. Это должно занять не более 10 минут!

Что такое шрифты Google?

«Google Fonts впервые были запущены в 2010 году как инженерная инициатива, направленная на продвижение Интернета и его ускорение». — Google Design

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

Кто использует шрифты Google?

Все знают! Графические дизайнеры, дизайнеры UX, исследователи, разработчики, веб-дизайнеры, блоггеры, менеджеры социальных сетей, предприниматели, художники, студенты, учителя, фотографы и многие другие. Я видел шрифты Google, используемые на рекламных щитах, плакатах, презентациях, свадебных приглашениях, веб-сайтах и ​​книгах.

Все и их мамы используют Google Fonts

Кто создает шрифты?

Google Fonts сотрудничает с дизайнерами шрифтов, производителями шрифтов и дизайнерским сообществом по всему миру. Эти люди и организации разрабатывают шрифты, которые вы видите в Google Fonts. Например, Лукаш Дзедзич — независимый дизайнер шрифтов, разработавший популярный шрифт Lato. Фирма ParaType разработала шрифт PT Serif.

Зачем Google шрифты?

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

Другая более утешительная причина, по которой Google заботится о шрифтах, заключается в том, что они хотят сделать общедоступные веб-шрифты доступными для широких масс. Они хотят сделать более быструю и красивую сеть, в которой легче ориентироваться и использовать. Они также запустили Google Fonts еще в 2010 году, когда такой сервис был очень нужен, поэтому они решили еще одну проблему, с которой мы столкнулись в Интернете. #небивил

Зачем мне их использовать?

Бесплатно не побьешь. Я прав? Помимо того, что вы бесплатны, вы должны рассмотреть возможность использования Google Fonts в своем следующем проекте веб-дизайна, потому что…

• Шрифты легко внедрить на ваш веб-сайт
• Существует более 850 шрифтов на выбор (и их число продолжает расти)
• В целом качество шрифтов продолжает расти
• Шрифты Google также можно загрузить для использования в печати

Ладно, ладно, ладно! Теперь о том, как вы их используете.

Посетите веб-сайт Google Fonts, где вы сможете выбрать из 853 семейств шрифтов, и их число продолжает расти! Веб-сайт позволяет фильтровать результаты по стилю шрифта, языкам, популярности и весу. Google Fonts также предлагает новые шрифты, если вы посещаете «избранную» страницу.

fonts.google.com

2) Поиск шрифтов, которые вам нравятся

Если вы имеете в виду название семейства шрифтов, вы можете найти его.

3) Нажмите «+», когда будете готовы его использовать.

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

4) Повторите шаги 1–3, если вы ищете более одного шрифта для использования

5) Щелкните «ящик выбора», чтобы показать все выбранные вами шрифты

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

6) «Ящик выбора» — это место, где вы возьмете код, который вы скопируете / вставите на свои веб-сайты. Код HTML и CSS

Из «ящика выбора» вы скопируете код, чтобы вставить его в свой HTML и CSS. Чтобы Google Fonts работал на вашем веб-сайте, у вас должно быть как семейство шрифтов, связанное с Google Fonts API (в HTML), так и указанное семейство шрифтов (в CSS).

7) Если хотите, добавьте разные начертания и стили шрифта, щелкнув вкладку «Настройка». Добавляйте только те веса и стили шрифтов, которые, как вы знаете, вам понадобятся, потому что чем больше шрифтов вы добавите, тем медленнее они будут загружаться на ваш сайт.

8) Скопируйте HTML-код и вставьте его в

вашего веб-сайта

Хорошо, мы почти закончили! Все, что нам нужно сделать сейчас, это скопировать и вставить код HTML и CSS на ваш сайт. Сначала скопируйте HTML-ссылку в заголовок HTML-документа.

9) Скопируйте правило CSS и вставьте его в файл CSS вашего веб-сайта

Наконец, нам также нужно скопировать и вставить правила CSS в ваш файл CSS.