Как подключить шрифт к сайту css google fonts
Перейти к содержимому

Как подключить шрифт к сайту css google fonts

  • автор:

Как добавить шрифты Google на сайт

Google Fonts

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

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

Основные преимущества в использовании Google Fonts:

Легкость в установке на любом веб-сайте: достаточно скопировать и вставить код HTML и CSS;

В каталоге более 100 шрифтов для русскоязычных сайтов;

Удобный поиск при подборе необходимого шрифта;

Все представленные шрифты имеют открытый исходный код.

Как начать использовать Google Fonts за несколько шагов.

Для выбора и установки шрифтов необходимо перейти в каталог Google Fonts.

Google Fonts

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

Выбираем подходящий шрифт из предложенных в каталоге и нажимаем «+», в данном случае выбран шрифт ‘Roboto’.

Google Fonts

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

Размещаем ссылку шрифта в HTML-коде сайта в раздел :

И используем следующее правило для стиля сайта в CSS:

font-family: 'Roboto';

Если на Вашем веб-проекте необходимо несколько шрифтов, Вам необходимо выбрать дополнительный шрифт в каталоге Google Fonts нажав «+», например ‘Open Sans’.

В результате Вы получите следующий код HTML для вставки на страницу веб-сайта в раздел :

И, соответственно, получаем следующее правило для стиля сайта в CSS. Например, для заголовка h1 будет использован шрифт ‘Roboto’ а для основного текста сайта — шрифт ‘Open Sans’:

.h1 .p

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

Шрифты Google Fonts

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

Один из самых популярных сервисов веб-шрифтов это Google Fonts.

лого Google Fonts

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

Как подключить шрифт Google Fonts

  1. Зайти на сайт fonts.google.com
  2. Выбрать нужный шрифт.
  3. Выбрать начертание шрифта.
  4. Скопировать готовую ссылку.
  5. Вставить ссылку на свой сайт.

Google Fonts

Скриншот: подключение шрифта Google Fonts

1) Для использования выбранного шрифта нужно добавить готовый код, сгенерируемый Google Fonts, на сайт, который загрузит таблицу стилей для выбранного шрифта:

  Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet"> . 

Можено добавить несколько шрифтов и вариаций каждого из них:

  Open+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> . 

2) Чтобы текст на сайте отображался выбранным шрифтом, в таблице стилей (css) прописать:

body

3) Теперь текст на вашем сайте браузер будет отображать подключенным стилем шрифта «Open Sans». Если по какой-то причине браузер не сможет подключить указанный шрифт «Open Sans», то текст будет отображен, указанным вами, альтернативным шрифтом «Arial», которй присутствует в ОС пользователя, как «веб-безопасный шрифт».

Как добавить Google Web Fonts на сайт

Google Web Fonts предлагает три варианта использования шрифтов на сайте: стандартный, @import и Javascript .

Обновлено: 2021-01-23 15:21:20 Вадим Дворников автор материала

Вариант 1: Стандартный

Откройте файл header.php , и добавьте в него между тегами и код, подобный представленному ниже:

Вариант 2: @import

Откройте файл style.css и добавьте в него сразу после объявления темы и ее параметров следующий код CSS :

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Вариант 3: Javascript

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

Так какой же из этих способов является наилучшим?

Стандартный способ включения Google Web Fonts меньше всего влияет на скорость сайта. Хотя на медленных соединениях посетители сайта могут видеть так называемые « вспышки текста без стилей » ( FOUT ). Сначала текст будет отображаться различными шрифтами ( например, CSS font family Arial ), а затем переключится на шрифт Google , когда он загрузится.

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

Код Javascript — это часть загрузчика WebFont , который является библиотекой Javascript , разработанной Google и Typekit . А это дает больше контроля над загрузкой шрифта. Но вряд ли вам нужен будет такой уровень контроля, который дает код Javascript , и он реализуется намного сложнее.

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

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

  • Объединение нескольких шрифтов в одном запросе. Вы можете сделать это с помощью символа «|».

Вместо того чтобы писать:

  • Не нужно запрашивать шрифты, которые вы не используете.

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

Как использовать Google Web Fonts на сайте?

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

Откройте файл style.css своей темы и добавьте в него следующий код CSS :

font-family: 'Open Sans', sans-serif;

применив его к тем элементам, к которым вы хотите применить шрифт. Это может быть тег body , если вы хотите применить шрифт к большинству элементов сайта:

body

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

h1, h2, h3, h4, h5, h6

Сохраните файл и загрузите его на сайт.

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

Возможно, у вас есть какие-либо вопросы? Напишите об этом в комментариях.

Добавить шрифт Google Fonts в WordPress

Существует немало плагинов, чтобы добавить шрифты Google на WordPress. Но в студии мы придерживаемся правила: «Если есть возможность не использовать плагины — не используем». Поэтому в статье рассмотрим способ добавления шрифтов без плагинов.

Шаг 1. Выбираем шрифт

Выбираем необходимые шрифты на fonts.google.com и добавляем их в избранное. В окошке справа появится код для вставки на сайт. По сути мы получаем две ссылки: одна на сайт со шрифтами, другая на выбранный шрифт.

Получить ссылку на шрифт Google Fonts

Получаем ссылку на шрифт Google Fonts

Шаг 2. Добавляем шрифт на сайт

Подключаем шрифт к сайту: вставляем код с полученными ссылками в head.

Код вставляем в functions.php дочерней темы.

Шаг 3. Присваиваем тексту новый шрифт

Используем css-свойство font-family , которое устанавливает шрифт, используемый для оформления текста.

Для примера возьмём первую строчку из песни Чиж и Ко «О любви». Обернём её в тег span с классом song-text :

А не спеть ли мне песню?

А классу song-text пропишем свойства:
Стили можно добавить в редакторе ‘Консоль > Внешний вид > Настроить > Дополнительные стили’

А не спеть ли мне песню?

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

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