Как подключить к своему сайту шрифты от Google Web Fonts?
Довольно часто те, кто рисует дизайн для сайта или просто создает свой сайт, хотят использовать для своего творения какие-то необычные шрифты.
Некоторое время назад использование на сайте уникальных шрифтов в принципе было невозможным. Можно было только нарисовать в фотошопе картинку с тем шрифтом, который вы хотели видеть на своем сайте, а потом загружать уже эту картинку на свой сайт.
Но сейчас ситуация изменилась к лучшему и существует несколько вариантов подключения шрифтов к своему сайту, причем вы можете сделать это, даже не закачивая их к себе на хостинг (хотя это тоже вариант, но более проблематичный).
Все, что вам нужно - это просто указать ссылку сервиса, откуда вы взяли выбранный шрифт и он уже будет подгружаться именно оттуда.
Это дает вам преимущество не только в экономии места на сервере, в экономии кода, а также и в том, что это абсолютно бесплатно и сам сервис заботится о том, чтобы шрифты на вашем сайте работали правильно.
Единственным недостатком можно считать то, что, например, шрифтов, которые поддерживают кириллицу, не так-то уж и много. Но это пока, они ведь постоянно добавляются, и даже из представленного количества шрифтов вы сможете выбрать тот, который придется вам по вкусу.
Для того, чтобы подключить к своему сайту уникальный шрифт, достаточно просто добавить пару строчек кода в два файла - в тег head файла с HTML кодом, и в файле стилей прописать дополнительные свойства для того элемента, шрифт которого вы хотите поменять.
В видеоуроке я показываю на конкретном примере, как подключить к своему сайту шрифты от Google Web Fonts.
Естественно, что шрифты, которые вы выбираете для своего сайта, должны быть удобными для чтения и подходить к тематике сайта. Чтобы не было так, что, например, на сайте о компьютерах были шрифты с завитушками и т.д.
Подходите к этому вопросу с хорошим вкусом и думайте о своих будущих посетителях, сделайте для них все, чтобы им было приятно и удобно находиться на вашем ресурсе.
ЗЫ: Если у вас показывает плохое качество видео, то вам нужно поменять в настройках качество на 720р HD.
ЗЗЫ: Если будут вопросы, не стесняйтесь их задавать в комментариях.
Буду рада ответить на них!
Автор статьи: Елена Лощилова.
Много неточностей.
1. Чтобы добавить произвольный код в HEAD следует разместить его в custom/head.php. Править main.php не следует!
2. Для подключения внешних шрифтов удобней использовать @import в самом css-файле. Для этого создаём файл css/fonts.css, где размещаем код из гугла, например:
Всё, шрифт доступен в любом css сайта.
Что касается меня:
1. Если бы надо было вставить код в HEAD, я бы использовал хук к ушке.
2. По поводу подключения через css - сам обычно так и делаю.
Мотай на ус Елена
Уже мотаю спасибо за критику!
Как раз верстаю очередной макет и размышлял как это сотворить! Огромное спасибо!!!
Пожалуйста!!!
Спасибо за полезный урок.
Пожалуйста, Вячеслав.
И вам спасибо за комментарий!