Шрифты гугл для сайта: 20 Лучших веб-шрифтов от Google Web

Услуги веб-студии WEBIKA

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

Устранение проблем работоспособности сайтов по условиям SLA. Хостинг, домен, SSL-сертификат, SQL-база данных, корпоративный почтовый сервер.

Написание текстов любого уровня сложности. Оформление страниц на сайте. Хороший контент позволит Вам увеличить целевой трафик и количество клиентов.

Полный комплекс мер по обеспечению посещаемости сайта целевыми посетителями.

Продемонстрируем и выведем на рынок Ваш новый товар или услугу. Повысим имидж Вашей компании

Востребованные услуги

80% людей оценивают доверие к Вашему бизнесу, основываясь исключительно на дизайне Вашего сайта.

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

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

Как подключить Google Fonts в CSS или HTML сайта

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

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

Как подключить гугл шрифты

Конечно, в первую очередь нас интересуют русские шрифты, поэтому заходим на сайт и выбираем во вкладке «Language» Cyrillic или Cyrillic Extended.

Таким образом, мы отфильтровали все шрифты и оставили только русскоязычные. На момент написания статьи кириллических 113, а расширенных кириллических 78.

Далее, во вкладке «Сategories» можно поставить фильтр на отображение шрифтов, которые не имеют засечек, выбрать рукописный и так далее.

Выпадающий список в «Font properties» позволяет задать дополнительные настройки и отфильтровать шрифты по ширине, толщине и другим параметрам, а галочка напротив «Show only variable fonts» позволяет отсеять не вариативные шрифты, в которых не предусмотрены сразу несколько видов толщины, наклона или курсива.

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

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

Если список вас устраивает, то переходите во вкладку Embed. Тут вас ждет дальнейшая инструкция по подключению.

Если вы планируете подключать шрифты в шапке сайта, то разместите между тегами «head» полученную строку. В моем случае это:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;1,100&display=swap" rel="stylesheet">

Для использования Google Fonts в CSS, у нужного класса или тега нужно указать:

font-family: 'Roboto', sans-serif;

Кроме того, шрифт можно импортировать через CSS. Перейдите во вкладку «@import» и скопируйте предложенную строку в свою таблицу стилей.

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

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

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

Как подключать шрифты Google Fonts, чтобы они быстро загружались

Вы не поверите, но шрифты могут серьезно влиять на производительность, если подключены неправильно.

И да, одной инструкцией или лонгридом не обойтись. Проще послушать и посмотреть, наглядно, как это работает и на что влияет. Ниже видео с разными способами подключения шрифтов и скоростью их загрузки. Мы рассмотрим способы подключения шрифтов Legacy, Swap, Async, Preload, Preconnect.

Расскажем как подключать, какие есть нюансы и детали при реализации. А в эфире номер 100 мы рассказываем про метод серверного пуша шрифтов.

99: Шрифты — как подключать шрифты, чтобы сайт не тормозил: про подключение Google Fonts.

Измеряйте скорость сайта из Москвы:

• 0:00 – Ответим на самые частые вопросы о правильном подключении шрифтов и как ускорить их загрузку. Сравниваем скорости загрузки Google Fonts и шрифтов с локального сервера

• 2:50 – Вопрос из зала о системных шрифтах: «Для скорости загрузки сайта лучше всего использовать System Font Stack? Например, шрифт Arial есть во всех ОС»

• 3:38 – Как вычислить системный ли шрифт или нет

• 7:37 – Что такое шрифты и как они могут влиять на скорость загрузки сайта

• 8:40 – Как определить вес шрифта

• 9:18 – 2 совета по уменьшению веса и оптимизации скорости подключения шрифтов: избавиться от неиспользуемых языков шрифта и сжимать диапазон используемых символов

• 10:20 – Вопрос из зала: «”localstorage” практикуете для шрифтов или это больше не нужно?»

• 11:50 – Рассмотрим 4 варианта оптимизации: Параметр display:swap / Подключение через Preload / Подключать через Google Fonts или с собственного сервиса/Использование CDN. Примеры всех типов подключения просмотреть по ссылке – 15:54

• 12:37 – Как выявить проблему со шрифтами и в каких случаях проблемы приоритетны для ускорения

• 16:24 – Показываем визуальную разницу в скорости загрузки шрифтов при разных видах подключения. Как выбрать тип

• 21:25 – Получить исходники готовых решений можно получить бесплатно по ссылке. Вопросы пишите на почту 6:20

• 22:24 – Чтобы скачать шрифты Google Fonts без парсинга формата woff/woff2 и загрузить на сервер, используйте сервис Google Webfont Helper

• 24:00 – Вопрос из предыдущего выпуска: «Из-за пользовательского кэширования выдавались одни и те же файлы, несмотря на отсутствие поддержки webp». Скрипт для отображения изображений webp или jpeg форматов в зависимости от поддержки браузера, получить можно здесь

• 26:20 – Комментарий из зала по примеру подключения шрифтов: «По видео не видно мигания»

• 26:20 – Как получить качественную работу по ускорению загрузки сайта

• 28:48 – Вопрос от зрителя: «local storage мертв в целом или только для шрифтов?»

• 30:55 – Вопрос про LCP (время отрисовки основного контента) из зала: «Зачем придавать шрифту preload, если используется font-display:swap?»

• 32:00 – Рассказываем о предстоящем 100-ом эфире и про статью на VC: «Могильная версия сайта: как угробить конверсию, создав сайт на конструкторе»

• 33:55 — Вопрос из зала: «При swap LCP и CLS как раз вырастет, разве нет?»

• 34:56 – Вопрос из зала о TimThumb: «Есть скрипт timthumb выводящий миниатюры к статьям, ссылка на картинку не прямая, в результате формат картинки webp не подгружается, есть ли решение?»

Ускорение сайтов: оптимизация подключаемых шрифтов

к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»

В этой статье мы обсудим важный аспект ускорения загрузки сайтов: подключаемые шрифты. На сегодняшний день большинство сайтов с профессиональным дизайном используют подключаемые шрифты: по данным httparchive.org это 60% из популярных сайтов.

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

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

Для оптимизации процесса рассмотрим два основных способа подключения шрифтов. Первый – размещение на собственном сервере, второй – использование сервиса Google Fonts.

Локальное размещение шрифтов

Этот способ требует наличия файлов шрифтов на сервере рядом с сайтом. Адреса для загрузки в этом случае указываются относительно домена сайта, например: url(‘/fonts/pts-webfont.eot’).

Использование сервиса Google Fonts

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

Оптимизация процесса загрузки шрифтов

Нас больше всего интересует вопросы ускорения загрузки шрифтов и уменьшения их влияния на общий процесс загрузки сайта.

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

Сокращение объема файлов шрифтов

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

1. Использовать наиболее продвинутый формат WOFF2 (до 30% экономии).
2. Для форматов TTF, EOT, SVG использовать gzip-сжатие.
3. Собирать шрифты только из необходимых наборов символов и начертаний.
4. Установить кеширующие заголовки для файлов шрифтов с большим сроком хранения.
5. Для редких случаев (заголовки, логотип) можно формировать файлы шрифтов по отдельным символам.

Большинство этих оптимизаций можно реализовать сервисами по конвертации шрифтов и настройками веб-сервера.

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

Сохранение шрифтов на сервере с сайтом

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

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

Тонкие оптимизации: Font Loading API

Для полного контроля процессом загрузки шрифтов создана технология Font Loading API. На данный момент она поддерживается не во всех современных браузерах. С помощью этого API можно принудительно запускать загрузку шрифтов, управлять правилами показа контента до загрузки шрифтов и так далее. Подробнее об этом можно прочитать в руководстве для разработчиков Web Fundamentals.

Выводы

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

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

Google Fonts API » Российская поддержка и разработка SocialEngine, PHPFox, Oxwall и ownCloud

В числе преимуществ:

● большой выбор высококачественных веб-шрифтов для любой вашей страницы.

Ниже я приведу пошаговую инструкцию, как найти и установить русские шрифты на ваш сайт.

Чтобы воспользоваться Google Fonts API, перейдите по данной ссылке http://www.google.com/webfonts .

Кликните по кнопке Cyrillic (как показано на рисунке ниже)

Из списка представленных шрифтов выберите нужный шрифт. Затем кликните по закладке “Use this font”. Замечу, что закладка “Download” вам не нужна, только если вы хотите использовать этот шрифт на своем компьютере, например, для фотошопа (правда гугл просит, но не требует, при этом сделать взнос для будущего развития хранилища).
Если вы собираетесь использовать этот шрифт курсивом или жирным, то поставьте галочки возле соответствующих названий.

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

Затем добавьте ссылку на желаемый шрифт в <head> секцию сайта (ссылку вы получаете когда выбираете шрифт).
К примеру:

<head>
<link href='http://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic,latin' rel='stylesheet' type='text/css'> <-- PT+Serif название шрифта  -- >
</head>

h2 { font-family: 'PT Serif', arial, serif; }

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

Вы узнаете как правильно использовать Google fonts

1. Заходим на сайт Google fonts

2. Вписываем название понравившегося шрифта или выбираем из списка предложенных (1). Есть возможность отсортировать шрифты по заданным критериям (1). Есть возможность вписать свой текст и посмотреть как он будет выглядеть в оформлении новым шрифтом (2). Нажимаем напротив выбранного шрифта Add to Collection (3).

3. После добавления выбранного шрифта в коллекцию — он отобразится внизу.

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

5. Если Вы собираетесь использовать шрифт для текста с кириллицей (русского например) — не забывайте указывать кириллицу в параметрах подключения (1). В итоге Вы получаете готовый код вставки Google шрифта к себе на сайт (2). В случае подключения шрифта методом «Standart» — полученный код вставляется перед закрытием тега <head> в индексном файле (index.html — в случае статического сайта без CMS, файл index.php шаблона — в случае работы с Joomla CMS). При выборе подключения шрифта методом @import — полученный код вставляется в файле стилей css.

6. Семейство шрифта, которое необходимо применить в css стилях на сайте.

7. Применение семейства шрифта к выбранному селектору в стилях css.

.selector {font-family: 'Open Sans', sans-serif;}

8. Добавление семейства шрифта в выборе шрифтов в настройках шаблона Joomla.

<field name="h2_font" type="list" label="h2 Font:" default="Arial, sans-serif">
 <option value="Open Sans, sans-serif">Open Sans</option>

Разгоняем 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: 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.

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

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

На обоих сайтах файл 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" />
    

Блокирующие рендеринг ресурсы никуда не делись, поэтому улучшений показателя 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 файла:

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

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

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

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

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

Улучшение показателей 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'" />
    

Показатели 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:

Показатели 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?

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

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

Хотя платформа содержит шрифты от крупнейших в мире шрифтовых заводов, они часто не являются их флагманскими продуктами, которые продаются через таких дистрибьюторов, как myfonts.com и Adobe Fonts.

Это не значит, что это некачественные шрифты. Они предлагают поддержку множества языков и функций OpenType.

Преимущества использования веб-шрифтов Google

• Бесплатно для коммерческого использования — шрифты в библиотеке защищены открытыми лицензиями, что дает вам бесконечные возможности их использования. Их также можно загрузить для использования в проектах печати без необходимости получения дополнительных лицензий.
• Они просты в использовании — Google особенно упростил их добавление на ваш сайт.
• Есть много вариантов — есть альтернативный шрифт для многих самых популярных гарнитур. В библиотеку регулярно добавляются новые шрифты, предлагая альтернативные версии классических шрифтов, таких как Baskerville и Franklin Gothic, которые имеют префикс Libre.
• Сами шрифты обновлены — и вам не нужно ничего делать, чтобы новые версии появились на вашем сайте. Помимо очистки кеша, это есть.
• Поддержка языков — шрифты библиотеки поддерживают несколько языков.Обязательно убедитесь, что выбранный вами шрифт поддерживает все языки, которые вам понадобятся.

Недостатки использования веб-шрифтов Google

• Они находятся в свободном доступе — это действительно поднимает вопрос, что каждый может их использовать, и многие люди таковыми являются. Это может привести к тому, что Интернет превратится в скучную сеть, всюду заполненную одним и тем же текстом.
• Они бесплатны. — Типографские литейные не зарабатывают 100 фунтов стерлингов за использование своих шрифтов, поэтому они могут загружать только подмножество толщин шрифтов или альтернативную версию тех, которые доступны в других местах.Это верно не для всех вариантов, некоторые из которых работают лучше, чем их платные аналоги.

Почему вам следует использовать веб-шрифты

Некоторые из вас могут спросить, зачем вам вообще следует использовать веб-шрифты. Это частый вопрос.

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

Он также может оказывать влияние на скорость и результаты поисковой системы для страницы.По возможности вы должны использовать HTML-текст для наложения изображения.

Самые популярные веб-шрифты Google

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

1. Roboto

Возглавляет этот список Roboto, который за последнюю неделю был доставлен через API шрифтов Google 64 миллиарда раз на 20 миллионах веб-сайтов.

Этот неогротескный шрифт без засечек, разработанный Кристианом Робертсоном и разработанный собственными силами Google, изначально предназначался для использования в качестве системного шрифта для их мобильной операционной системы Android в 2011 году.С тех пор Google адаптировал шрифт для различных платформ, таких как Gmail и их сеть Campus.

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

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

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

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

2. Lato

Этот шрифт становится все более популярным из-за его сходства с другим популярным шрифтом Brandon Grotesque.Он также имеет много общего с печально известным шрифтом Gill Sans, что делает его отличной альтернативой. Это одно из самых больших семейств, доступных с 10 вариациями от светлого до черного с настоящими курсивными аналогами.

Этот шрифт, разработанный Лукашем Дзедзичем, получил свое название от польского слова «лето». Первоначально созданный для польского банка, он был выпущен с OFL и приобрел популярность в репозитории.

3. Open Sans

Следующим в списке идет Open Sans, разработанный Стивом Маттесоном для Google.Этот шрифт с открытым исходным кодом использует большую высоту по оси x (высокие строчные символы). Шрифт был создан для использования на всех носителях на экране и в печати, что повысило общую читаемость шрифта.

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

4. Монтсеррат

Семья Монтсеррат была вдохновлена ​​типографскими плакатами, которые когда-то окружали район Монтсеррат в Буэнос-Айресе.Также очевидна связь с некоторыми классическими геометрическими шрифтами, такими как Gill & Futura.

Первоначально был создан аргентинским шрифтовиком Джульетой Улановски летом 2017 года. Вся семья подверглась редизайну под руководством Жака Ле Байи: обычная версия стала легче и оптимизирована для использования в более длинных текстах. Эти функции делают его отличным выбором для блоков копирования в блогах и на страницах. Тяжелая версия шрифтов отлично подходит для привлекательных заголовков.

5. Libre Baskerville

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

Однако это не первый случай возрождения этого шрифта: чрезвычайно популярный Mrs Eaves от Emigre стал одним из первых цифровых вариантов шрифта.

Libre Baskerville доказал, что он самый приятный из доступных шрифтов.Людям нравится, как персонажи представляют традиционный почерк и классические характеристики.

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

На что следует обратить внимание при выборе шрифта Google Web

Пользователь

При выборе способа его отображения очень важно учитывать, кто будет читать текст.

Если вы нацеливаете сайт на молодую аудиторию, вам следует выбрать шрифт, который содержит крупные строчные буквы с мягким налетом.Шрифты, такие как Kalam, содержат буквы, которые кажутся написанными толстым маркером, что упрощает навигацию по сайту.

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

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

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

Языки

Лучше всего убедиться, что набор символов выбранного шрифта позволяет переводить ваш веб-сайт на различные языки. Если вы продаете свои услуги или продукты в Германии, убедитесь, что существует полная поддержка немецкого языка, включая умляуты и эссетт.

Что касается языков, важно проверить, для какого языка оптимизирован шрифт.Часть коллекции GF была разработана для доставки на определенный язык, например Heebo, аналог Roboto на иврите.

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

Это не единственный шрифт, созданный для использования с определенным языком.Если вам нужна дополнительная уверенность в выборе шрифта, мы можем проконсультировать вас по вопросам языковой поддержки.

Сопряжения

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

Нужна помощь?

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

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

Часто задаваемые вопросы | Google Fonts | Разработчики Google

Если возникнут проблемы в реальном времени, напишите нам в Твиттере @googlefonts. По техническим вопросам опубликуйте проблему в нашей системе отслеживания проблем GitHub. Если вам нужно связаться с нами в частном порядке, напишите по адресу [email protected].

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

Как мне найти шрифты, поддерживающие мой язык?

Перейдите на сайт fonts.google.com, щелкните фильтр «Язык» и используйте раскрывающееся меню, чтобы выбрать систему письма, используемую для языка, который вы ищете.

Могу ли я использовать функции CSS, такие как тени текста и вращение, с веб-шрифтами?

Совершенно верно. Любая функция CSS, которую можно применить к тексту в Интернете, хорошо работает со всеми типами шрифтов — веб-шрифтами, локальными шрифтами и системными шрифтами.

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

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

Как загрузить шрифт в Google Fonts?

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

Как я могу использовать Google Fonts GitHub?

Вы можете использовать наш GitHub для загрузки файлов шрифтов для установки или самостоятельного размещения, проблем с файлами, с которыми вы столкнулись в любом аспекте нашего продукта, и даже для добавления своих собственных шрифтов.Проверьте это на github.com/google/fonts.

Что означает использование API Google Fonts для конфиденциальности моих пользователей?

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

Использование Google Fonts API не аутентифицировано. Посетители веб-сайта не отправляют файлы cookie в Google Fonts API. Запросы к API Google Fonts отправляются в домены, относящиеся к конкретным ресурсам, например fonts.googleapis.com или fonts.gstatic.com. Это означает, что ваши запросы шрифтов отделены от учетных данных, которые вы отправляете на google.com при использовании других аутентифицированных сервисов Google, таких как Gmail, и не содержат их.

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

Запросы на ресурсы CSS кешируются на 1 день. Это позволяет нам обновлять таблицу стилей, чтобы указывать на новую версию файла шрифта при его обновлении, и гарантирует, что все веб-сайты, использующие шрифты, размещенные в Google Fonts API, будут использовать самую последнюю версию каждого шрифта в течение 24 часов после каждого выпуска. .

Файлы шрифтов кешируются на 1 год.

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

Откуда взялся образец текста домашней страницы?

«Сияющий полумесяц далеко под летающим кораблем» — Triplanetary, E.Э. Смит

«Все их оборудование и инструменты живы» — Мистер Космический Корабль, Филип К. Дик

«Почти до того, как мы это осознали, мы покинули землю» — Путешествие на Венеру, Джон Манро

«Я видел шторм, такой красивый, но потрясающий» — Франкенштейн, Мэри Шелли

«Это будет одинокое путешествие обратно» — «Молодежь» Исаака Азимова

«Туман окутал корабль в трех часах пути от порта» — Драгоценности Аптора, Сэмюэл Р. Делани

«У моих двух натур была общая память» — Странная история доктора Джекила и мистера Хайда, Роберт Луи Стивенсон

«Она смотрела в окно на звезды» — «Удобная невеста миллионера», Кэтрин Джордж ????

«Серебряный туман окутал палубу корабля» — Драгоценности Аптора, Сэмюэл Р.Делани

«Лицо луны было в тени» — Мистер Космический Корабль, Филип К. Дик

«Записанный голос поцарапан в динамике» — Deathworld, Гарри Харрисон

«Небо было безоблачным и темно-синего цвета» — Путешествие к Венере, Джон Манро

«Зрелище перед нами было действительно грандиозным» — Путешествие на Венеру, Джон Манро

«Настала ночь первой падающей звезды» — Война миров, Г. Г. Уэллс

«Волны бросились в синий вечер» — Драгоценности Аптора, Сэмюэл Р.Делани «

«Красный силуэт подчеркивал зазубренный край крыла» — Драгоценности Аптора, Сэмюэл Р. Делани

Лучшие веб-шрифты Google: взгляд дизайнера

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

Раньше было всего несколько способов получить свои шрифты. Вы можете потратить тысячи долларов на официально санкционированные коллекции от крупных литейных фабрик; вы могли попасть в захудалый мир бесплатных загружаемых шрифтов, которые также часто содержали бесплатные вирусы; или вы можете просто «позаимствовать» шрифты у друга, коллеги, клиента или поставщика. В конце концов, кто узнает?

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

Что такое шрифты Google и зачем их использовать?

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

Есть ряд заманчивых причин использовать Google Fonts.

1. Это надежно и проверено.
2. Поскольку они бесплатны, вам не нужно платить за использование шрифта на своем сайте.Это может сэкономить вам много денег по сравнению с коммерческими шрифтами, которые требуют единовременной платы, цены в год или даже платы в зависимости от вашего трафика.
3. Если шрифт, используемый вашим брендом, имеет подписку для использования в Интернете, которую ваша компания не может себе позволить, вы часто можете найти аналогичные альтернативы в Google Fonts.
4. Поскольку Google сообщает вам, как ваш выбор влияет на скорость, он побуждает вас делать правильный выбор. Вы не хотите использовать все шрифты на своем сайте, да и не должны.Но если кто-то не скажет вам обратное, их можно легко загрузить, не задумываясь!
5. Экспериментировать проще. Если ваш стартап еще не определился со шрифтами, Google Fonts может отлично подойти для тестирования комбинаций. Вам не нужно брать на себя обязательства, и вы можете легко поменять его, если передумаете.

Шрифты Google и скорость страницы: что нужно знать

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

1. Загрузите только абсолютное минимальное количество шрифтов и толщины, которые вам нужны.
2. Загрузите шрифты и начертание за один вызов. Google позволяет перечислить сразу несколько шрифтов, разделенных вертикальной линией (|). Если вы загружаете каждый отдельный сценарий импорта, это создает больше работы для сервера, поскольку он загружает их по одному.
3. Сценарий импорта Google блокирует рендеринг. Это означает, что остальная часть страницы блокируется от загрузки до загрузки шрифтов. Загрузка шрифта с помощью Javascript из нижнего колонтитула вашей страницы вместо заголовка поможет, но есть и лучшие альтернативы.Для достижения наилучших результатов используйте Web Font Loader или плагин WordPress, например Easy Google Fonts или TK Google Fonts.

Сколько шрифтов в порядке?

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

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

Относитесь к шрифтам критически и минималистично. Вы не только сократите время загрузки страницы, но и сохраните чистый дизайн.

Лучшие шрифты Google

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

Нравится Myriad? Тогда вам понравится его бесплатный доппельгангер Source Sans Pro с широким выбором веса и отличной читаемостью при любом размере. Поскольку он используется более чем на четырех миллионах сайтов, он должен быть хорошим.

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

Доступный в различных стилях и весах, Lato придает современный, дружелюбный вид тексту любого размера. Неудивительно, что его используют восемь миллионов сайтов!

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

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

Лучшие шрифты с засечками

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

Отличный основной шрифт с немного старомодным привкусом, Alegreya имеет отличные жирные версии для заголовков и представлен на более чем 250 000 веб-сайтов.

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

Этот шрифт с плоскими засечками великолепен сам по себе, но также может использоваться вместе с его расширенным семейством, которое включает Roboto (базовый вариант без засечек), Roboto Condensed и Roboto Mono. Хотя Robot Slab не используется так часто, как Merriweather, он также является хорошим выбором для других стран.

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

Лучшие декоративные и специальные шрифты

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

Отличительный, универсальный и хорошо сбалансированный шрифт для жирных заголовков.Abril Fatface поддерживает более пятидесяти языков.

Идеальное название для этого шрифта, смягчающего жесткую графику за счет более повседневного и женственного почерка. Если вы ищете нестандартный вариант, Architects Daughter — это наименее используемый шрифт в нашем списке.

Множество лигатур и альтернативных символов делают Lobster красивым, жирным и забавным шрифтом.

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

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

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

Лато поддерживает классический авторитет Мерривезера, не мешая ему.

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

Обычно мы не можем сочетать два шрифта с засечками вместе, но использование Abril Fatface в качестве крупного и жирного заголовка все же может эффективно контрастировать с более легким и последовательным видом Alegrey.

Architects Daughter делает заголовок забавным, вычурным, но Open Sans сохраняет основной текст разборчивым — именно таким, каким он должен быть.

Для получения дополнительных идей по сочетанию шрифтов у fontpair.io есть собственный список рекомендаций или используйте font-combiner.com для смешивания и сопоставления в реальном времени. Google также внесет свои предложения.

Шрифты за пределами Google

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

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

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

Если бюджет не расписан, вы, вероятно, сможете найти что-то довольно близкое к нему бесплатно в Google Fonts. А для тех проектов, которые не требуют такой тонкости, вы можете быть уверены, что Google будет рядом, чтобы быстро собрать что-то презентабельное.

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

Как использовать Google Fonts в вашем следующем проекте веб-дизайна

by Hayden Mills

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

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

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

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

Кто использует Google Fonts?

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

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

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

Почему Google заботятся о шрифтах?

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

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

Почему мне стоит подумать об их использовании?

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

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

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

Как использовать шрифты Google — шаг за шагом

1) Перейдите на веб-сайт Google Fonts

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

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

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

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

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

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

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

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

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

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

7) Добавьте разные толщины и стили шрифтов, если хотите, щелкнув вкладку «Настроить».

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

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

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

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

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

10) Сохраните оба файла (HTML и CSS), затем обновите свой веб-сайт и просмотрите новый шрифт.

Не забудьте сохранить и обновить!

Вот и все! Вы успешно внедрили свой первый шрифт Google на свой веб-сайт.Поздравляю, вы программист. Справедливо сказать, что шрифты Google в основном…

Больше чтения

Спасибо за чтение

Не стесняйтесь оставлять комментарии ниже или обращаться ко мне в Twitter с любыми вопросами ✌️

Кроме того, я создатель пары шрифтов , который поможет вам объединить шрифты Google. Загляните в нашу новую публикацию на Medium, чтобы узнать больше о типографике!

Лучший шрифт Google для веб-сайта 2021

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

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

Лучший шрифт Google для перечисленных ниже:

1. Roboto
2. Open Sans
3. Noto Sans JP
4. Poppins
5. Roboto Slab
6. Nunito
7. Rale
8. PT Serif
9. Oxygen
10. Lato

  url ('Neuton-bold-webfont.woff') формат ('woff'),
  

  url ('../fonts/neuton-bold-webfont.woff ') формат (' woff '),
  

  url ('
  

  url ('../ fonts /