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

Fonts googleapis com CSS family предоставляет три варианта использования шрифтов на веб-сайте: стандартный, @import и Javascript.

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

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

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

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Вариант 2: @import

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

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

Вариант 3: Javascript

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

Так какой же из данных методов будет наилучшим?

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

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

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

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

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

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

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

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

пишите:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster">
  1. Не необходимо запрашивать шрифты, которые вы не используете.

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

Как использовать шрифты на веб-сайте?

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

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

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

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

body { font-family: 'Open Sans', sans-serif;}

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

h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif;}

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

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

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

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

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