Как добавить Google Web Fonts на сайт
Google Web Fonts предлагает три варианта использования шрифтов на сайте: стандартный, @import и Javascript.
Вариант 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> специальный код.
Так какой же из этих способов является наилучшим?
Стандартный способ включения Google Web Fonts меньше всего влияет на скорость сайта. Хотя на медленных соединениях посетители сайта могут видеть так называемые «вспышки текста без стилей» (FOUT). Сначала текст будет отображаться различными шрифтами (например, CSS font family Arial), а затем переключится на шрифт Google, когда он загрузится.
Способ @import позволяет предотвратить это, но он может замедлить сайт: прежде чем выводить контент, браузер будет ждать, пока шрифт загрузится.
Код Javascript - это часть загрузчика WebFont, который является библиотекой Javascript, разработанной Google и Typekit. А это дает больше контроля над загрузкой шрифта. Но вряд ли вам нужен будет такой уровень контроля, который дает код Javascript, и он реализуется намного сложнее.
Стандартный способ используется чаще всего по следующим причинам. Это, вероятно, самый простой метод подключения шрифтов на сайте. Он больше подходит для посетителей, использующих медленное соединение, так как они смогут видеть и читать содержимое, а не ждать, пока включенный шрифт будет загружен.
Тем не менее, рекомендуется оптимизировать сайт так, чтобы он загружался как можно быстрее. Что касается шрифтов Google, то их оптимизация осуществляется следующим образом:
- Объединение нескольких шрифтов в одном запросе. Вы можете сделать это с помощью символа "|".
Вместо того чтобы писать:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">пишите:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster">- Не нужно запрашивать шрифты, которые вы не используете.
Если вы не используете font family Tahoma в CSS, то не подключайте его. Некоторые браузеры загружают только файлы тех шрифтов, которые необходимы для отображения текста на странице. Но другие будут загружать все шрифты, что замедлит ваш сайт.
Как использовать Google Web Fonts на сайте?
До сих пор, мы только добавляли шрифты, чтобы использовать их, но они не будут применяться, пока вы не укажете, где они должны отображаться.
Откройте файл style.css своей темы и добавьте в него следующий код CSS:
font-family: 'Open Sans', sans-serif;применив его к тем элементам, к которым вы хотите применить шрифт. Это может быть тег body, если вы хотите применить шрифт к большинству элементов сайта:
body {
font-family: 'Open Sans', sans-serif;
}Или, если вы хотите применить CSS family только к заголовкам, то можете добавить следующий код:
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
}Сохраните файл и загрузите его на сайт.
Вы также можете использовать выбранные шрифты Google в изображениях, чтобы они соответствовали остальной части вашего сайта.
Возможно, у вас есть какие-либо вопросы? Напишите об этом в комментариях.