Как ЛЕГКО подключить нестандартный шрифт к сайту. Шрифты google

Как подключить нестандартный шрифт к сайтуКак бы сказал всем известный дядька Гоблин, я вас категорически приветствую, друзья!

Вы знаете, вчера захотел поменять на блоге шрифт, хотел, чтобы текст был популярным сегодня шрифтом Open Sans (я кайфую от этого шрифта, и сейчас как раз текст на блоге именно open sans), но чтобы текст стал шрифтом open sans, пришлось немного погуглить, потому что простое прописывание правила в таблице стилей css:  font-family: ‘Open Sans’ ни к чему не привело, шрифт не хотел становиться open sans, никак не хотел.

Зачем к сайту подключать нестандартные шрифты? Да просто — для красоты, для дизайна, для изящества — в общем, что бы восхищало  взгляд :)

Итак, после поисков я нашел несколько вариантов подключения на сайт нестандартных шрифтов.

Один вариант показался мне мудренным — нужно скачать шрифт с определенным расширением, затем загрузить нестандартный шрифт  на хостинг, потом в стилях через специальное правило прописать путь к этому шрифту, в общем, я сказал себе «нет» (я ленивый)

Другой вариант заключался в подключении к сайту специальной библиотеки Cufon. Я только успел прочитал первые строчки инструкции о том, что нужно подключить Ява скрипт, какие-то «куфоны», «реплайсы» — в ужасе закрыл вкладку :)  Ну нафиг, подумал я!

А вот теперь встречайте самый простой способ подключения нестандартного шрифта к вашему сайту через сервис Google. С помощью google шрифтов.

Шрифты google

Итак, вот ссылка на google шрифты — http://www.google.com/fonts Вам туда

Слева в меню во вкладке «Script» включите «Cyrillic» (т.е. это русские шрифты). На данный момент у Гугла 53 русских шрифта (и 632 латинских)

гугл шрифты

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

А если вы пришли за конкретным шрифтом, то слева вверху введите в поиск название шрифта. Я ввел «open sans» и нажал на кнопочку Enter. Если шрифт есть в библиотеки шрифтов гугла, то он его найдет.

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

Далее в блоке с нужным вам шрифтом жмете на небольшую иконку справа (стрелочка направленная вправо)

google шрифты

Во втором пункте устанавливаете галочку в чекбокс «Cyrillic»

устанавливаем на саит шрифты из гугла

Ну а в третьем пункте выбираете как будете подключать шрифт на сайт:

1. Standard.

подключаем на сайт нестандартные шрифты из google

Копируем код и размещаем его в файле header.php перед закрывающем тегом </head>

2. @import

подключаем нестандартные шрифты из google

Можете переключить вкладку на @import, скопировать код и разместить его в самом начале файла стилей style.css.

Третий способ javascript я не рассматривал.

Какой бы способ подключения вы не выбрали, вам только останется в файле стилей css поменять классы у «font-family» на новый подключенный шрифт.

подключаем нестандартный шрифт


gugl-shrifty-5

Внимание! Чем больше нестандартных шрифтов вы будете подключать к своему сайту с помощью сервиса Google, тем скорость загрузки вашего сайта будет меньше! Имейте это в виду!

При подключении шрифтов google, следите за спидометром скорости загрузки вашего сайта, и не доводите то критической отметки :)

В целом, чтобы подключить нестандартный шрифт, вам потребуется 2 минуты! Все!

Также, с Гугл шрифтов любой шрифт можно скачать себе на компьютер нажав справа сверху кнопочку донлоад.

P.S. Сейчас популярные шрифты open sans и ubuntu

Все, удачи вам сегодня!

    ADD YOUR COMMENT