Как подключить гугл шрифты для сайта

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

Как подключить гугл шрифты

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

подключить гугл шрифты

Далее, во вкладке All categories можно поставить фильтр на отображение шрифтов, которые не имеют засечек или наоборот и так далее.

После того, как определились со шрифтом жмите на иконку quick-use, и вас перебросит на новую страницу:

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

<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Ее мы должны разместить на сайте, между тегами head.

<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head>

А так же строка

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

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

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

Вот и все, теперь вы знаете как подключить шрифты Google к своему сайту. Если есть вопросы, задавайте их в комментариях.

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 5

  1. Елена

    Полезная информация. пару месяцев искала ее назад. Много времени потратила.

    • dimadv7

      Здравствуйте, спасибо за ваш комментарий, впереди еще много интересного, подписывайтесь на rss или twitter чтобы не пропустить новые статьи

  2. Сергей

    А в какой последовательности необходимо подключать шрифт с помощью такой ссылки? Я имею в виду в head содержится много ссылок и как выбрать правильно расположение для данной? Я слышал, что порядок подключения играет роль. Например, все css подключают в начале, а js-файлы в конце.

    • dimadv7

      Сss подключают первыми, так как они отвечают за отображение страницы. Js подключают позже, так как он используется, чаще всего, после того, как отобразилась страничка. Иногда, есть возможность подключить js в конце страницы, как и css, иногда это играет ключевую роль и нельзя. Все зависит от конкретного случая. Шрифт гугл, ну подключите после основного файла стилей. В данном случае это не критично и вы не заметите разницы, где бы не расположили. Но все css подключать до использования js. Все это связано с тем, что команды выполняются синхронно, друг за другом. И если скрипты «Тяжелые» то их загрузка может занять слишком много времени. Поэтому, сначала подключают то, что отвечает за основное оформление, а потом второстепенные функции. Как-то так, надеюсь, что общая картина понятна. Конечно, есть возможность грузить скрипты асинхронно и это ускорит их загрузку, но это уже другая история…

  3. remenergo.pro

    Спасибо, полезная информация, как раз искал — что лучше @import или link для шрифтов. Раньше все время подключал через импорт якобы, чтобы код чище был, а оказывается это влияет на скорость, будем исправлять.

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