Шрифты для интернета: Самые лучшие Гугл шрифты для сайта или ПК – ТОП 15

Веб-шрифты:

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

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

Хорошо, но нельзя ли вставить в изображение любой шрифт, какой захочу?

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

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

С точки зрения рабочего процесса встраивание текста в изображения ужасно неэффективно и сильно ограничивает возможности.

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

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

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

Monotype, например, предлагает несколько вариантов. Наша корпоративная лицензия включает веб-шрифты для объявлений HTML5, и вы можете приобрести отдельные лицензии на веб-сайты и цифровые рекламные веб-шрифты через MyFonts.com.

Далее, вторая часть этой серии: Что делает веб-шрифты такими замечательными  

Понимание того, как свести к минимуму негативное влияние веб-шрифтов на основные веб-показатели Страницы результатов поисковой системы (SERP).

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

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

Содержание

1. Что такое веб-шрифты?
2. Основные термины Web Vitals, которые вы должны понимать
3. Как веб-шрифты могут негативно повлиять на Largest Contentful Paint
4. Как веб-шрифты могут негативно повлиять на совокупное смещение макета
5. Стратегии снижения негативного влияния на Core Web Vitals
6. Дополнительные советы по работе с веб-шрифтами

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

Это шрифты, которые предварительно не установлены в системе пользователя. Вернее, скачиваем их с сервера через УСБ @font-face объявление и отображать их при загрузке веб-страницы в браузере. С веб-шрифтами мы больше не ограничены веб-безопасными шрифтами, такими как Georgia, Arial или Times New Roman, и вместо этого можем использовать пользовательские шрифты.

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

В настоящее время в Интернете используются четыре основных шрифта:

• TrueType Font (TTF)
• Web Open Font Format (WOFF)
• Web Open Font Format (WOFF2)
• Embedded Open Type (EOT)
900 96

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

Термины Core Web Vitals, которые вы должны понимать

Вот три показателя CWV и аспекты взаимодействия с пользователем, которые они измеряют:

• Крупнейшая отрисовка содержимого (LCP) измеряет визуальное восприятие скорости загрузки веб-сайта
• Совокупное смещение макета (CLS) измеряет визуальную стабильность
• Задержка первого ввода (FID) измеряет интерактивность страницы

Эти показатели показывают элементы, влияющие на то, как пользователи взаимодействуют с веб-сайтом. Помимо этих основных, есть и другие важные веб-важные параметры, такие как First Contentful Paint (FCP) и Time to First Byte (TTFB), которые действуют как прокси-меры или вторичные метрики, но не используются для определения рейтинга SERP.

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

Максимальное отрисовка содержимого (LCP)

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

Изображения, изображения видеопостеров, фоновые изображения и текстовые элементы блочного уровня, такие как теги абзацев, являются типичными элементами, измеряемыми LCP. Google классифицирует время загрузки LCP 2,5 секунды или меньше как хорошее, но, вообще говоря, чем быстрее оно загружается, тем лучше.

Совокупное смещение макета (CLS)

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

Согласно стандарту Google, веб-сайт должен иметь показатель CLS не более 0,1.

Некоторые причины возникновения CLS:

• Динамически внедряемый контент
• Рекламные объявления, вставки, фреймы, изображения и видео без размеров
• Веб-шрифты, вызывающие мигание невидимого текста (FOIT) или мигание нестилизованного текста (FOUT)

Развивайте свое понимание показателей Core Web Vitals

• 5 ключевых стратегий по снижению проблем с LCP

  5 ключевых стратегий по снижению проблем с LCP

• 5 Key Str Технологии минимизации кумулятивного смещения макета

  5 ключевых стратегий минимизации кумулятивного смещения макета

Как веб-шрифты могут негативно повлиять на Largest Contentful Paint

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

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

Как веб-шрифты могут негативно повлиять на совокупное смещение макета

Веб-шрифты негативно влияют на CLS, поскольку они требуют больше времени для загрузки и отличаются по размеру и внешнему виду от системных шрифтов. Большинство веб-шрифтов загружаются медленно без оптимизации, что означает, что веб-сайты изначально отображаются с системными шрифтами. Однако, когда веб-шрифт, наконец, загружается, браузер заменяет его системным шрифтом, а разница в размере приводит к смещению макета страницы. Этот эффект смещения и переключения между шрифтами называется Flash of Invisible Text (FOIT) или Flash of Unstyled Text (FOUT), и он приводит к неожиданным изменениям макета.

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

Стратегии по уменьшению негативного влияния веб-шрифтов на баллы Core Web Vitals

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

Вот несколько стратегий, которые мы можем применить для правильной оптимизации веб-шрифтов и снижения их негативного влияния на Core Web Vitals.

Дополнительные дисплеи и предварительная загрузка веб-шрифтов

Лучшим способом является увеличение скорости загрузки пользовательских веб-шрифтов путем их предварительной загрузки с использованием атрибута rel="preload" в теге link в head вашего веб-сайта. , и используя font-display: optional в вашем файле CSS.

Преднатяг 9Атрибут 0081 гарантирует, что шрифты загружаются как можно раньше, а дополнительное отображение дает шрифту некоторое время для загрузки. Если шрифт не загружается вовремя, страница будет отображаться с этим шрифтом по умолчанию. Затем веб-шрифт будет кэширован и использован при будущих загрузках страниц.

 
<голова>
  <ссылка
    отн = "предварительная загрузка"
    href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
    отн = "таблица стилей"
  />
 

 /* затем добавьте объявление шрифта во внешнюю таблицу стилей */
@шрифт-лицо {
семейство шрифтов: "Roboto", без засечек;
  стиль шрифта: обычный;
  вес шрифта: 400;
  отображение шрифта: необязательно;
} 

Использование size-adjust

Включение CSS-дескриптора size-adjust в правило font-face приведет к минимальным визуальным изменениям и сделает замену шрифта плавной.

Сопоставление размеров веб-шрифтов и резервных шрифтов

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

Дополнительные советы по работе с веб-шрифтами

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

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

Ранее мы видели, что в Интернете используются четыре основных формата шрифтов: TTF, WOFF, WOFF2 и EOT. WOFF и WOFF2 были разработаны Google и являются новейшими форматами. Шрифты WOFF2 сильно сжаты и на 30-60% легче своих аналогов. Не все браузеры поддерживают WOFF2, поэтому нам нужно включить другие форматы в качестве запасных вариантов, чтобы обеспечить кросс-браузерную совместимость. Вы можете узнать больше о том, что браузеры поддерживают или не поддерживают, с помощью подобных инструментов.

Предварительное подключение к сторонним ресурсам

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

Преимущество Google Fonts заключается в том, что он добавляет ключевое слово preconnect в фрагмент HTML, который они создают для нас.

 <голова>
  
<ссылка rel="preconnect" href="https://fonts.gstatic.com" перекрестное происхождение>

 

Подмножество ваших шрифтов

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

Мы можем использовать следующие инструменты для подмножества веб-шрифтов:

• Шрифтовые инструменты
• Дескриптор диапазона Unicode
• Google Web Fonts API

Применение встроенных веб-шрифтов

Встраиваемый веб-шрифт s в заголовке HTML document делает их доступными для браузера на ранней стадии. Это также предотвращает отправку браузером нескольких запросов на загрузку на сервер, где находятся шрифты. Это уменьшает объем данных, которые необходимо передать, и ускоряет отрисовку шрифта. Тем не менее, мы должны использовать встраивание шрифтов с осторожностью, так как это может привести к задержкам загрузки страницы в случаях, когда файлы шрифтов большие.

 <голова>
  <ссылка
    отн = "предварительная загрузка"
    href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
    отн = "таблица стилей"
  />
  <стиль>
    @шрифт-лицо {
      семейство шрифтов: "Roboto", без засечек;
      стиль шрифта: обычный;
      вес шрифта: 400;
      отображение шрифта: необязательно;
    }
  
 

Кэширование

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

Ограничение количества шрифтов

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