Как использовать сторонние шрифты на странице?
(044) 391-40-82
Контакты
Главная → Статьи → Как использовать сторонние шрифты на странице?
20.09.2013

Как использовать сторонние шрифты на странице?


Как использовать сторонние шрифты на странице?

Несмотря на то, что сторонние шрифты, достаточно компромиссное решение на сайте, их все чаще используют веб-дизайнеры, ведь так хочется сделать сайт красивее. Итак, как же внедрить данный шрифт?

Первый метод использования стороннего шрифта на странице – это загрузка его из соответствующей базы шрифтов на сервер, а затем прописывание в 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>

Успехов Вам в мастерстве внедрения и совершенствования Вашего сайта с помощью шрифтов. Сторонние шрифты позволят выделить Ваш сайт среди других, сделать его необычным, привлекательным, отличаясь от шаблонных ресурсов. Важно, чтобы пользователь, зайдя с любого браузера, смог правильно видеть Ваш контент. 


Вам понравился сайт?

Рассказать друзьям