Как подключить к своему сайту шрифты от Google Web Fonts?
Довольно часто те, кто рисует дизайн для сайта или просто создает свой сайт, хотят использовать для своего творения какие-то необычные шрифты.
Некоторое время назад использование на сайте уникальных шрифтов в принципе было невозможным. Можно было только нарисовать в фотошопе картинку с тем шрифтом, который вы хотели видеть на своем сайте, а потом загружать уже эту картинку на свой сайт.
Но сейчас ситуация изменилась к лучшему и существует несколько вариантов подключения шрифтов к своему сайту, причем вы можете сделать это, даже не закачивая их к себе на хостинг (хотя это тоже вариант, но более проблематичный).
Все, что вам нужно - это просто указать ссылку сервиса, откуда вы взяли выбранный шрифт и он уже будет подгружаться именно оттуда.
Это дает вам преимущество не только в экономии места на сервере, в экономии кода, а также и в том, что это абсолютно бесплатно и сам сервис заботится о том, чтобы шрифты на вашем сайте работали правильно.
Единственным недостатком можно считать то, что, например, шрифтов, которые поддерживают кириллицу, не так-то уж и много. Но это пока, они ведь постоянно добавляются, и даже из представленного количества шрифтов вы сможете выбрать тот, который придется вам по вкусу.
Для того, чтобы подключить к своему сайту уникальный шрифт, достаточно просто добавить пару строчек кода в два файла - в тег head файла с HTML кодом, и в файле стилей прописать дополнительные свойства для того элемента, шрифт которого вы хотите поменять.
В видеоуроке я показываю на конкретном примере, как подключить к своему сайту шрифты от Google Web Fonts.
Естественно, что шрифты, которые вы выбираете для своего сайта, должны быть удобными для чтения и подходить к тематике сайта. Чтобы не было так, что, например, на сайте о компьютерах были шрифты с завитушками и т.д.
Подходите к этому вопросу с хорошим вкусом и думайте о своих будущих посетителях, сделайте для них все, чтобы им было приятно и удобно находиться на вашем ресурсе.
ЗЫ: Если у вас показывает плохое качество видео, то вам нужно поменять в настройках качество на 720р HD.
ЗЗЫ: Если будут вопросы, не стесняйтесь их задавать в комментариях.
Буду рада ответить на них!
Автор статьи: Елена Лощилова.
Комментариев: 7
2013-02-12 в 15:03:58
Много неточностей.
1. Чтобы добавить произвольный код в HEAD следует разместить его в custom/head.php. Править main.php не следует!
2. Для подключения внешних шрифтов удобней использовать @import в самом css-файле. Для этого создаём файл css/fonts.css, где размещаем код из гугла, например:
Всё, шрифт доступен в любом css сайта.
2013-02-12 в 15:27:42
Что касается меня:
1. Если бы надо было вставить код в HEAD, я бы использовал хук к ушке.
2. По поводу подключения через css - сам обычно так и делаю.
Мотай на ус Елена
2013-02-12 в 15:59:14
Уже мотаю спасибо за критику!
2013-02-12 в 16:43:16
Как раз верстаю очередной макет и размышлял как это сотворить! Огромное спасибо!!!
2013-02-13 в 03:27:57
Пожалуйста!!!
2013-02-20 в 18:23:03
Спасибо за полезный урок.
2013-02-21 в 05:43:19
Пожалуйста, Вячеслав.
И вам спасибо за комментарий!