К описанному ранее, достаточно популярному способу подключения нестандартного шрифта (cufon), мы рассмотрим преимущества и недостатки подключения нестандартных шрифтов от google.
Главные преимущества этого способа: легкость подключения, большой выбор шрифтов кириллицей и латиницей, удобный интерфейс.
Первый этап установки google fonts: заходим на веб-страницу google.com/fonts и выбираем понравившийся шрифт. Для более детального подбора можно воспользоваться вспомогательными фильтрами и инструментами.
По фильтру (слева) можно отсортировать шрифт по толщине, наклону, ширине, поддержке кириллицы. Можно посмотреть пример написания отдельных слов, строк текста и целых параграфов.
Второй этап подключения google шрифт для сайта. Нажимаем «Add to Collection». Внизу открывается панель управления шрифтом. Выбираем вкладку «Use».
Далее делаем настройки шрифта для импорта на сайт. Выбираем стили, поддержу латиницы/кириллицы. В виде «спидометра» показана скорость нагрузки (дополнительного веса) данного шрифта на сайт. Зеленая зона – ваши посетители не заметят дискомфорта при загрузке страницы.
Третий этап - непосредственное подключение google fonts к сайту. Существует 3 способа установки (все они отображаются в панели google fonts):
- Стандартный. Вставляем сгенерированный кусок кода (например, <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400&subset=latin,cyrillic' rel='stylesheet' type='text/css'>) в пределах тега <head>…</head>.
- @import. Вставляем сгенерированный кусок кода (например, @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400&subset=latin,cyrillic);) в любой СSS файл сайта.
- JavaScript. Подключаем сгенерированный скрипт к сайту.
Последний шаг, применяем подключенный шрифт (правильное название шрифта сгенерировано в панели) для любого элемента CSS на сайте. Например
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
Единственным минусом подключения google шрифта к сайту может быть то, что корректно они могут отображаться только браузерах Google Chrome и Opera. Остальные браузеры под вопросом. Их необходимо будет проверять.