Главная / Верстка сайта / Верстка сайта Как добавить шрифты Google на сайт

Верстка сайта Как добавить шрифты 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, то их оптимизация осуществляется следующим образом:

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

    <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">

  • Не нужно запрашивать шрифты, которые вы не используете.
  • Если вы не используете 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 в изображениях, чтобы они соответствовали остальной части вашего сайта.

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

    Перевод статьи «HOW TO ADD GOOGLE FONTS TO YOUR WEBSITE» был подготовлен дружной командой проекта Сайтостроение от А до Я.

    О нас seoexpert

    продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

    Смотрите также

    Создание цветной рамки вокруг текста с помощью HTML и CSS

    Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...