Руководство по использованию шрифтов Google с Google и плагинами!

Опубликовано: 2021-07-30

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

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

Почему Google Fonts — очевидный выбор?
Были времена, когда в Интернете были стандартные шрифты, которые утомляли любого, кто на них смотрел, но время шло, веб-дизайнеры и разработчики были вынуждены ограничивать выбор шрифтов для живого текста и разрабатывать шрифты, совместимые с наибольшим числом пользователей. Интернет. Они придумали CSS3. Инициатором этого стал Typekit.

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

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

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

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

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

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

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

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

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

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

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

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

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

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

Возьмите фрагмент HTML и поместите его рядом с заголовком HTML следующим образом:

Заголовок страницы

Перейдите к CSS и следуйте этому:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

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

1. Плагин шрифтов
Плагины шрифтов

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

2. Простые шрифты Google
Легкие шрифты Google

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

3. ТК Google Шрифты
тк гугл шрифты

TK Google Fonts добавит все 291 веб-шрифт Google в вашу панель визуального редактора, когда вы разрабатываете страницы или сообщения. Просто установите его и начните использовать.

Установка вышеуказанных плагинов:

  • Войдите в систему администратора WordPress
  • Нажмите «Плагины»
  • Нажмите «Добавить новый»
  • Введите название плагина в правом верхнем углу и нажмите «Установить сейчас».

Настройка плагинов

  • Нажмите «Внешний вид», а затем нажмите «Настроить».
  • Нажмите «Посетить сайт», а затем «Настроить».
  • Вы заметите новое добавленное меню как «Типографика».

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

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

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

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

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

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

Направляем правильный шрифт!

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

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

Выбор шрифтов

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

Быстрый доступ — чтобы быстро просмотреть понравившийся шрифт.

Pop Out — чтобы узнать больше о шрифте, т. е. о его функциональности и использовании.

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

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

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

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

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

семейство шрифтов: 'Henry Pigeous', с засечками;
 семейство шрифтов: «Дипломатический». скоропись;

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

Возьмите фрагмент HTML и поместите его рядом с заголовком HTML следующим образом:

Заголовок страницы

Перейдите к CSS и следуйте этому:

ч1 {

шрифт: 400 45px/0.5 'Diplomatic', Arial, без засечек;

}

п {

шрифт: 400 14px/1.5 'Henry Pegasus', Times, с засечками;

}

Об авторе:
Кэтрин Гарсия — опытный веб-разработчик в Hosting Facts и страстный блоггер. Она любит делиться своими знаниями в своих статьях о веб-разработке и WordPress.