Как подключить к своему сайту шрифты от Google Web Fonts?

Как подключить к своему сайту шрифты от Google Web Fonts?

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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

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

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

Для того, чтобы подключить к своему сайту уникальный шрифт, достаточно просто добавить пару строчек кода в два файла - в тег head файла с HTML кодом, и в файле стилей прописать дополнительные свойства для того элемента, шрифт которого вы хотите поменять.

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



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

Подходите к этому вопросу с хорошим вкусом и думайте о своих будущих посетителях, сделайте для них все, чтобы им было приятно и удобно находиться на вашем ресурсе.

ЗЫ: Если у вас показывает плохое качество видео, то вам нужно поменять в настройках качество на 720р HD.

ЗЗЫ: Если будут вопросы, не стесняйтесь их задавать в комментариях.

Буду рада ответить на них!

Автор статьи: Елена Лощилова.

Комментариев: 7 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 7
  •  Максим | 12 февраля 2013 в 15:03:58

    Много неточностей.

    1. Чтобы добавить произвольный код в HEAD следует разместить его в custom/head.php. Править main.php не следует!

    2. Для подключения внешних шрифтов удобней использовать @import в самом css-файле. Для этого создаём файл css/fonts.css, где размещаем код из гугла, например:

    @import url(http://fonts.googleapis.com/css?family=EB+Garamond&subset=latin,cyrillic);

    Всё, шрифт доступен в любом css сайта.

  •  Серёга | 12 февраля 2013 в 15:27:42

    Что касается меня:

    1. Если бы надо было вставить код в HEAD, я бы использовал хук к ушке.

    2. По поводу подключения через css - сам обычно так и делаю.

    Мотай на ус Елена smile

  •  Елена | 12 февраля 2013 в 15:59:14

    Уже мотаю smile спасибо за критику!

  •  Александр | 12 февраля 2013 в 16:43:16

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

  •  Елена | 13 февраля 2013 в 03:27:57

    Пожалуйста!!!

  •  Вячеслав | 20 февраля 2013 в 18:23:03

    Спасибо за полезный урок.

  •  Елена | 21 февраля 2013 в 05:43:19

    Пожалуйста, Вячеслав.

    И вам спасибо за комментарий!