Главная -> HTML -> Как подключить Google шрифты

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

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

Что дает использование Google шрифтов

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

Сейчас же будет достаточно просто вставить одну строчку, подключающую тот шрифт, который вам нужен (или несколько).

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

Шаг 1. Идем на сайт со шрифтами www.google.com/fonts/

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

Шаг 3. Между тегами ... вставляем следующий код:

То есть после family= добавляем название шрифта.

Шаг 4. Подключаем шрифт в css (в нашем случае мы назначаем шрифт для заголовка H1, а так вы можете выбрать нужный селектор)

h1 {
font-family: 'Ubuntu', sans-serif;
font-size: 24px;
line-height: 26px;
}

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

Возможные вопросы и проблемы при подключении шрифтов

1. Как подключить несколько шрифтов
Чтобы одновременно подключить несколько шрифтов, достаточно их разделить вертикальным слэшем (|). Если в названии шрифта есть пробелы, их следует заменить на знак + (плюс):

В файле стилей .css знак + (плюс) мы не используем, и код будет выглядеть следующим образом:
font-family: 'Ubuntu Condensed', sans-serif;

2. Как подключить разные стили для шрифта
По умолчанию шрифт подключается в обычном написании, то есть без наклонов и без жирности, их следует прописать отдельно. используются следующие обозначения:

  • курсив italic или i
  • жирный bold или b или числовое обозначение веса, например 700
  • жирный курсив bolditalic или bi

Подключаем стили через двоеточие и через запятую, например:

Проблема с отображением Гугл шрифта в Опере

При использовании Google шрифтов у вас могут возникнуть проблемы с отображением их в Opera, по крайней мере у меня она появилась как раз для Ubuntu, курсива. Проблема решается следующим образом: мы напрямую указываем, что из всего шрифта нам надо использовать именно кириллицу (для английского алфавита таких проблем не наблюдалось) subset=cyrillic. Например:

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

Развлекайтесь!

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.