Как использовать сторонние шрифты на странице?
Несмотря на то, что сторонние шрифты, достаточно компромиссное решение на сайте, их все чаще используют веб-дизайнеры, ведь так хочется сделать сайт красивее. Итак, как же внедрить данный шрифт?
Первый метод использования стороннего шрифта на странице – это загрузка его из соответствующей базы шрифтов на сервер, а затем прописывание в CSS с помощью правила @font-face. Допустим, Вы нашли и загрузили шрифт Ledger. Создаем на сервере папку, к примеру, font и загружаем туда шрифт Ledger.ttf, а затем, используя правило @font-face, прописываем в css-файле шаблона следующий код:
@font-face {
font-family: 'Ledger';
src:
local('Ledger'),
url('/font/ledger.ttf') format('truetype');
}
Таким образом, мы прописываем путь к файлу шрифта.
Чтобы использовать данный шрифт, например, для всех абзацев, в CSS прописываем свойство для текста внутри абзаца:
p{
font-family: 'Ledger';
}
Впрочем, предлагаемый метод внедрения шрифта считается несколько устаревшим по тем самым причинам, что он наименее кроссбраузерный.
Довольно популярной является подгрузка шрифта с помощью сервиса от «Google» (google.com/webfonts). Здесь Вы найдете около 50 кириллических шрифтов и намного больше шрифтов с поддержкой латиницы.
Итак, на сервисе выбираете приглянувшийся шрифт и добавляете его в коллекцию. Под примером отображения шрифта нажимаем на ссылку Quick-use, получая дополнительную информацию. Сначала оцените время загрузки страницы при использовании данного шрифта и выбранных настроек, затем выберите наборы символов, которые хотите использовать на сайте (латиница, расширенная латиница, кириллица и расширенная кириллица).
Если Вы планируете использовать и кириллицу, и латиницу, то в панели, где определяется тип отображения”, выберите Latin и Cyrillic. Затем определитесь с типом установки кода на ваш сайт. Предложенный системой код из вкладки standard вставляете в <head> Вашего шаблона. Тоже самое с вариантом вставки скрипта. Если же Вы выбрали @import, то код вставляете в начало CSS-файла. Далее прописываете свойство font-family для необходимого элемента (font-family: ‘Ledger’, Arial, serif).
Популярное использование технологии Cufon
Однако наиболее кроссбраузерным добавлением шрифта на сайт считается использование технологии Cufon или онлайн-генератора Fontsquirrel. Что касается куфона, то сначала подключаете в <head> шаблона библиотеку Cufon, добавляя туда следующий код:
<script type="text/javascript" src="http://сайт куфон.com/js/cufon-yui.js"></script>.
Затем переходите на «http://cufon.shoqolate.com/generate/» и, выбрав необходимые опции, генерируете шрифт. Загружаете сгенерированный файл на хостинг и снова подключаете в
<head>: <script type="text/javascript"src="название_сгенерированного_файла"></script>.
Чтобы использовать шрифт в теге <h1>, нужно в <head> прописать такой код:
<script type="text/javascript"> Cufon.replace("h1"); </script>
Успехов Вам в мастерстве внедрения и совершенствования Вашего сайта с помощью шрифтов. Сторонние шрифты позволят выделить Ваш сайт среди других, сделать его необычным, привлекательным, отличаясь от шаблонных ресурсов. Важно, чтобы пользователь, зайдя с любого браузера, смог правильно видеть Ваш контент.