Google com fonts: How to Connect Fonts from Google Fonts │ Tilda Help Center

Разное 

Настройка шрифтов Google — Gainsight Inc.

  1. Последнее обновление
  2. Сохранить как PDF
Содержание
    1. Обзор
    2. Импорт шрифтов Google
    3. Применение импортированных пользовательских шрифтов

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

Обзор

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

Примечание. Пользовательские шрифты

недоступны для опросных заданий.

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

Импорт Google Fonts

Для импорта и применения пользовательских шрифтов необходимы базовые знания HTML и CSS.

Чтобы импортировать пользовательский шрифт Google в ваше участие: 

  1. Перейдите на fonts.google.com
  2. На вкладке Шрифты выберите стиль шрифта.
  3. Нажмите Выберите этот стиль .
  4. Щелкните значок Просмотр выбранных семейств . Отображается ящик Selected Families .
  5. Из ящика Selected Family скопируйте ссылку для встраивания шрифта в вашего HTML.
  6. Щелкните значок Code View на вкладке Editor вашего Engagement Editor .
  7. Вставьте код в вашего HTML.
  8. Нажмите Сохранить .

Применить импортированные пользовательские шрифты

Чтобы применить импортированные пользовательские шрифты: 

  1. Из ящика Selected Family скопируйте значение пары ключ-значение семейства шрифтов.

  2. На вкладке CSS редактора вставьте семейство шрифтов для Dialog Wrapper , Dialog Title , Dialog Content

    и Dialog Main List .

Примечания: 

  • Вы можете встраивать шрифты разных семейств в разные разделы содержимого CSS.
  • Шрифт Dialog Wrapper устанавливается как шрифт по умолчанию, если семейство шрифтов не определено для Dialog Title , Dialog Content и Dialog Main List .
  • Шрифт Arial устанавливается как шрифт по умолчанию, если семейство шрифтов не определено для Dialog Wrapper.
  • Используйте ключевое слово CSS !important; чтобы расставить приоритеты для ваших пользовательских команд CSS.

  1. Наверх
    • Была ли эта статья полезной?
    1. Тип изделия
      Тема
    2. Теги
      1. КСС
      2. Шрифты для помолвки
      3. Внешние шрифты
      4. Настройки шрифта
      5. шрифты Google
      6. HTML

    Оптимизация шрифтов Google — База знаний WP Rocket

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

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

    🚀 Эта функция включается автоматически при установке WP Rocket.

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

    Об этой оптимизации

    Когда вы используете Google Fonts на своем веб-сайте, происходит следующее:

    1. Существует исходный HTTP-запрос к таблице стилей шрифтов Google, размещенной по адресу fonts.googleapis.com
      . Обычно на каждый шрифт, который вы выбрали, приходится 1 запрос.
    2. Затем в этой таблице стилей указывается ссылка на сам шрифт, и его необходимо загрузить с fonts.gstatic.com
      3. .

    Оптимизация Google Fonts выполняет следующие действия для оптимизации этих запросов.

    1. Если на странице несколько запросов к Google Fonts, они будут объединены в один запрос. Это немного уменьшит общее количество HTTP-запросов.
    2. Добавляет в запрос параметр
      display=swap       , чтобы выполнить рекомендацию PageSpeed ​​по обеспечению видимости текста во время загрузки веб-шрифта. Эта оптимизация будет применена, даже если на вашей странице есть только один запрос шрифта.
    3. Предварительно загружает и загружает файл Google Font асинхронно (т. е. без блокировки рендеринга)
    4. Добавляет подсказку ресурса preconnect в запрос для улучшения времени загрузки шрифтов:

    Эта оптимизация применяется только к кешированным/оптимизированным страницам.

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

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

    Запросы неоптимизированных шрифтов

    На приведенном ниже снимке экрана есть 2 отдельных запроса на использование шрифтов Google (щелкните, чтобы открыть полноразмерное изображение).

    Запрос оптимизированного шрифта

    Здесь вы можете видеть, что оба запроса были объединены в один запрос с добавленным параметром

    display=swap (щелкните, чтобы открыть полноразмерное изображение).

    Также добавлена ​​подсказка перед подключением: 

    API шрифтов Google v2

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

    Версия API распознается в URL-адресе:
    Исходный API:

    https://fonts.googleapis.com/css
    API v2: https://fonts.googleapis.com/css2

    Если вы используете новый атрибут text , эти запросы несовместимы с объединением и останутся отдельными запросами. Например: https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

    Обновление предыдущих версий

    Если вы обновили версию WP Rocket и ранее не включили эту опцию, она не будет включена после обновления.

    Если вы хотите активировать его после обновления, перейдите на вкладку Инструменты и используйте предоставленную кнопку:

    Деактивировать эту опцию

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

    📥   Скачать (.zip):  WP Rocket | Отключить Google Font Optimization
    Разработчики: код этого плагина можно найти на GitHub.

    Изменение атрибута отображения шрифтов Google

    Чтобы изменить значение подкачки атрибута «отображать», который добавляется к URL-адресу, созданному с помощью функции «Объединить шрифты Google», просто используйте наш плагин WP Rocket Helper ниже, заменив «своп» одним из автоматических, блокированных, резервных, необязательный. Установка значения «auto» будет использовать поведение браузера по умолчанию.

    📥   Скачать (.zip):  WP Rocket | Изменить атрибут отображения шрифтов Google
    Разработчики: вы можете найти код этого плагина на GitHub.

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

    Оптимизация шрифтов Google не работает

    Функция оптимизации Google Fonts в WP Rocket не будет работать в следующих случаях:

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

      No related posts.

    Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *