G o o g l e w e b f o n t
перейти в каталог шрифтов
Google продолжает упрощать жизнь web-разработчикам. Их сервис Google Web Fonts позволяет встроить на страницы сайта шрифты, которые не входят в джентльменский набор шрифтов операционных систем. При выборе шрифта для своего сайта обычно приходится довольствоваться стандартным и не очень большим набором шрифтов, которые присутствуют во всех современных операционных системах. Ведь если я буду использовать какой-нибудь редкий шрифт, то велика вероятность, что у посетителей сайта он не будет установлен и они вместо красивого шрифта увидят стандартный. Но с тех пор, как современные браузеры стали поддерживать конструкцию css @font-face стало возможно определить настройки шрифтов сайта, а также загрузить специфичный шрифт на компьютер пользователя. Google пошёл дальше, и создал сервис, который позволяет пользователю подгружать посетителям своего сайта лицензионно чистые шрифты с серверов Google.
Источник
Если не поняли смысл сказанного - просмотрите пример использования шрифтов с google web font. Несмотря на то, что у вас не установлены данные шрифты, все отображается корректно *, не так ли? Заманчиво. Любые заголовки можно украсить невообразимо прекрасными шрифтами. Ну а теперь, инструкция к применению:
I. В каталоге google fonts выбираем тип шрифта, который нам нужен (кириллица и латинница думаю будут актуальны у нас. Или есть люди из Камбоджи и Греции?)
II. Выбираем нужный шрифт из хранилища Google fonts и запускаем предварительный просмотр. Проверьте правильность отображения символом, в том числе и кириллицы. Кнопка предварительного просмотра - Pop out.
III. Все нравится? Устанавливаем. Жмем Quick-use и копируем код шрифта, или по желанию меняете настройки шрифта. Обязательно отметьте, что хотите использовать не только латинские символы, но и кириллические.
После этого скопируйте один из трех вариантов кода, который сервис вам предложит.
Standart - этот вариант самый простой: вы копируете предложенный код, и вставляете в файл header.php между тегами <head>.
@import - вариант для тех, кто хочет импортировать шрифт в файл стилей: добавляете в style.css строчку с кодом.
Javascript - вариант для тех, кто хочет внедрить шрифт в отдельную страницу, либо для тех, кто создает скрипт, использующий определенный шрифт. Просто вставляете выданный код в нужное место шаблона.
Итак, выбираем самый простой тип - Standart. Копируем первое поле кода, типа: *
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
обеспечивает подключение файла шрифта на сайте. Повторюсь - эту часть года вставляем между тегами <head> в шапку сайта. Вторая часть кода, типа: *
font-family: 'Great Vibes', cursive;
устанавливается в стили к необходимому элементу. Например, к элементу body. Чтоб поменять в css размер шрифта, надо прописать font-size:15px и менять количество пикселов до нужного значение. В css жирный шрифт указывается вот таким селектором: font-weight: bold и так далее. Сохраняем, проверяем.
Работает? Отлично. Как видите, совершенно ничего сложного.
Очень удобная штука, этот Google Font API, подключить шрифт можно буквально за несколько минут, большой выбор шрифтов (для латинницы выбор действительно впечатляет) и скорость загрузки шрифта клиентом обеспечивается серверами Google. Тем не менее, учтите, что использование подгружаемых шрифтов замедлит загрузку веб-страницы! Используй только те шрифты и стили, которые действительно необходимы.
Сноски:
.. отображается корректно * - если у вас Window XP и браузер Chrome, то web-шрифт отображается не совсем корректно - тоньше и не совсем ровно. Может происходить некоторая задержка с отображением шрифта на странице, но обычно она практически незаметна.
.. код, типа * - использован код шрифта Great Vibes
Пример готового варианта кода страницы со шрифтами:
<head>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<style>
body {font-family: 'Great Vibes', cursive;
font-size:15px; }
</style>
<body>
Пример текста шрифта [b]Great Vibes[/b]
</body>Использованы материалы: gering111, n-wp и habrahabr
Советуем ознакомиться так же и с openfontlibrary
копирование с etiquette-r.ru запрещено
