Googleapis fonts: Google Fonts | Google Developers

Что такое fonts.googleapis.com? — Техно Blog

Вы когда-нибудь видели зависшую веб-страницу в своем браузере, отображающую сообщение «Ожидание fonts.googleapis.com» в строке состояния? В этой статье мы попытаемся объяснить основную причину сообщения «Ожидание fonts.googleapis.com» и способы его исправления, чтобы веб-страница могла быть загружена быстро. Сообщение будет выглядеть так как показано ниже. Веб-странице которую вы пытаетесь открыть может понадобиться много времени, чтобы загрузиться или иногда она вообще не загружается.

 

 

Как правило, проблема возникает в браузерах, таких как Google Chrome, Mozilla Firefox, Safari и Microsoft Edge.

Что такое fonts.googleapis.com?

Если вам интересен этот домен «fonts.googleapis.com», откройте его в окне браузера. Вы увидите сообщение об ошибке 404 не найдена, так как это не доступный домен.

 

 

Тогда что это? Google предоставляет более 650 бесплатных семейств шрифтов под собственной общей лицензией, которые широко используются в Интернете. Чтобы динамически получить доступ к этим шрифтам, Google предлагает службу API, чтобы разработчики создающие тему, плагин или любые другие службы, могли использовать вызов API для загрузки необходимых семейств шрифтов из доменов Google, таких как fonts.googleapis.com, googleusercontent.com или gstatic .com. Все шрифты Google можно просмотреть на официальном сайте шрифтов.

 

Связь между Google Fonts и веб-страницами

Всякий раз, когда вы просматриваете веб-страницу, которая использует любой из шрифтов Google, браузер будет пытаться загрузить необходимые шрифты с серверов Google. Браузер показывает сообщение «Ожидание fonts.googleapis.com» в строке состояния до момента полной загрузки шрифтов в локальный кеш. Запрос API отправляется с использованием тега <link> в CSS веб-страницы. Вы можете проверить это, посмотрев на источник страницы. Например, в Google Chrome щелкните правой кнопкой мыши на странице и выберите вариант просмотра страницы.

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

 

 

Почему страница загружается очень медленно при использовании Google Fonts?

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

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

 

 

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

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

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

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

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

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

• Плагины и тема использующие Разнообразие шрифтов. Как объяснялось выше, время загрузки шрифтов значительно увеличится, когда на сайте будет использовано большое количество файлов шрифтов.

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

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

• Дополнительные запросы HTTP. Браузер сделает индивидуальный HTTP-запрос для каждой таблицы стилей со страницы, называя шрифты Google, что задержит общее время отклика с сервера.

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

Как исправить проблему fonts.googleapis.com?

Ниже приведены некоторые рекомендации, которые вы можете использовать для быстрой загрузки страницы:

1. Использование статических DNS-серверов Google

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

2. Блокировка fonts.googleapis.com с файлом хостов

Если публичный DNS не работает для вас, следующая опция — попытаться заблокировать домен «fonts.googleapis.com». Это можно сделать, указав домен «fonts.googleapis.com» на IP-адрес локального хоста в файле hosts, доступном на вашем ПК или Mac. Когда вы блокируете шрифты Google, браузеры будут использовать резервные шрифты, определенные в CSS сайта, или использовать шрифт по умолчанию в браузере.

Добавьте нижеуказанные записи в файл hosts, чтобы заблокировать домен «fonts.googleapis.com» для IPv4 и IPv6 соответственно:

127.0.0.1 fonts.googleapis.com

:: 1 fonts.googleapis.com

3. Отключить очистку кэша браузера при выходе.

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

4. Проверьте расширения браузера

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

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

5. Сброс браузера и маршрутизатора

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

6. Заблокированные службы Google

Многие страны, такие как Китай, блокируют полные сервисы Google, включая «fonts. googleapis.com». Попробуйте надежные VPN или прокси-сервисы, чтобы обойти брандмауэр, который может помочь в загрузке страниц быстрее. Возможно также, что только ваш интернет-провайдер блокирует Google шрифты, хотя другие интернет-провайдеры разрешают. Если вы подозреваете проблемы со своим интернет-провайдером, попробуйте открыть страницу с другой сетью и подтвердите, что проблема сохраняется в сети, или только у вашего интернет-провайдера есть эта проблема.

Не забудьте использовать премиальные VPN-сервисы, такие как VyprVPN или ExpressVPN, и избегать использования ненадежных бесплатных прокси-серверов для защиты ваших действий в браузере.

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

7. Остановите загрузку страницы в Chrome

Когда вы увидите сообщение «Ожидание fonts.googleapis.com» в строке состояния, нажмите «Остановить загрузку страницы». Это прекратит вызов API, вы сразу увидите, что Chrome загружает содержимое страницы с резервными шрифтами. Это работает только в Google Chrome, может повлиять на отображение содержимого.

8. Владельцам сайтов

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

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

9. Для разработчиков

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

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

 

 

10. Фактор конфиденциальности при использовании Google Fonts

Помимо медленной загрузки страницы, Google также собирает данные об использовании шрифтов, когда браузер инициирует вызов API на fonts.googlepis.com, googleusercontent. com или gstatic.com. Каждый запрос CSS и загрузка файла шрифтов регистрируются Google и используются на сайте Google Fonts Analytics . Google также найдет, какие сайты используют свои шрифты с помощью Google crawl и использует данные для создания базы данных сайтов с использованием шрифтов Google. Поэтому, если вы не хотите, чтобы Google использовал данные вашего сайта, отключите шрифты Google и используйте общие шрифты.

 

Заключительные слова

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

 

Шрифты Google API » Скрипты для сайтов

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

Как использовать Google Font API

Шаг 1. Добавить ссылку таблицы стилей выбранного шрифта
Выберите понравившийся из каталога шрифт и вставьте его название в Font+Name.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Шаг 2. Использование шрифта для изменения HTML элементов

CSS selector {
    font-family: 'Font Name', serif;
}

То есть вместо CSS selector вставляете: h2, li, a и т.д.
Если Вы собираетесь использовать данный шрифт только один раз, можете декларировать стиль в HTML:

<div>Ваш текст</div>

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

Пример использования Google Font API

Выбран шрифт Tangerine, в качестве «отката» — шрифт serif.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
        <style>
            body {
                font-family: 'Tangerine', serif;
                font-size: 48px;
            }
        </style>
    </head>
    <body>
        <h2>Пример текста заголовка</h2>
    </body>
</html>

Загрузка нескольких шрифтов из Google Font API

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

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Разделяйте названия шрифтов | без пробелов между ними. Обратите внимание на + в шрифте Droid Sans. Используйте + в названиях шрифтов, где есть пробелы. В нашем случае название шрифта Droid Sans, поэтому будем в запросе записывать

Droid+Sans.
Используйте двоеточие «:» после названия шрифта (без пробелов), чтобы загрузить другие вариации шрифта (например, italic, bold, bolditalic) или короткий код вариации (например, i, b, bi). Если предполагается использовать различные вариации для одного шрифта, указывайте их без пробелов, разделяя запятыми.

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Для кирилических (Cyrillic) шрифтов (или других: latin, Greek, Khmer

) нужно будет указать в запросе, какой именно тип подгружать у шрифта.
Например для шрифта Philosopher подгрузим только кириллицу:

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

или же погрузим сразу и кириллицу и латиницу:

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Вот такую полезную штуку придумали ребята из Гугл.

google apis explorer — есть ли способ разбить на страницы или поисковый запрос для динамического списка шрифтов?

спросил

1 год, 5 месяцев назад

Изменено 1 год, 3 месяца назад

Просмотрено 163 раза

Весь список состоит почти из 1мб данных. Я хочу реализовать автозаполнение для выбора шрифтов Google. Я уже включил полей параметр (чтобы получить только необходимые данные). Можно ли использовать поисковый запрос для этой конечной точки?

Говоря об этом: https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

• google-apis-explorer
• google-font-api

Я узнал, что вы можете использовать параметры с API здесь https://developers.google.com/fonts/docs/developer_api

Если вам нужны только семейства (имена шрифтов) и подмножества (кириллица, латиница и т. д.), вы можете использовать параметр «fileds» с items.family,items.subsets (items.variants — это добавит доступные веса и стили еще на 100 КБ)

Это отправит вам всего 150 КБ, что лучше, чем 1 МБ.

Вы можете отфильтровать эти параметры по своим предпочтениям, а затем использовать этот API https://developers.google.com/fonts/docs/css2

Вот как Google делает это на своей странице шрифтов https://fonts.google .com/

С этим: https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900

Вы получите обычный шрифт Roboto 900 и курсив 400 (400 вес шрифта по умолчанию) получит обычный шрифт Roboto 900 и курсив 700.

Затем вы можете проанализировать эти файлы и получить только желаемое подмножество.

Для предварительного просмотра вы можете использовать тот же URL-адрес с некоторыми дополнительными параметрами, чтобы вы могли загружать только те символы, которые будете использовать: https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,700&subset=latin-ext&display=block&text=%20,.

ABabdefghiklmnorstuw

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Почему Google Font предварительно подключается к fonts.

googleapis.com

Я хочу добавить шрифт Quicksand на свой веб-сайт, поэтому Google подсказал мне добавить следующее —

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

 

Мой вопрос: какое преимущество мы получим с первой строкой кода, т. е. с предварительным подключением к fonts.googleapis.com

Я имею в виду, что понимаю смысл предварительного подключения к fonts.gstatic.com в качестве файлов шрифтов находятся в этом домене

• html
• web
• google-font-api

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

Добавление rel=preconnect к информирует браузер о том, что ваша страница намеревается установить соединение с другим доменом и что вы хотите, чтобы процесс начался как можно скорее. Ресурсы будут загружаться быстрее, потому что процесс установки уже завершен к тому моменту, когда браузер их запрашивает.

https://web.dev/i18n/en/preconnect-and-dns-prefetch/

2

Все основные браузеры (Google Chrome, Apple Safari, Microsoft Edge) вместо текста, в котором используется этот шрифт, отображается пустое пространство до тех пор, пока шрифт не загрузится .

Только Mozilla Firefox отображает текст шрифтом по умолчанию, а затем повторно отображает текст шрифтом после загрузки .

Таким образом, для лучшего взаимодействия с пользователем Link Type rel="preconnect" используется, чтобы при переходе по ссылке связанный контент можно было получить быстрее.

---

Документация MDN:

Типы соединений: предварительное соединение

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

No related posts.