Как использовать Свой шрифт на сайте

Сегодня у нас небольшая подборка решений, которые помогут вам использовать свой — любой (ну почти 😉 шрифт на своем сайте. Среди рассмотренных решений будут скрипты, которые используют только JS,  JS+Flash и JS+PHP.

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

Typeface.js

Решение на чистом JS, без использования флеша. Скрипт использует для работы SVG и VML. Давайте посмотрим, как это все работает.

Для начала, идем на страницы загрузки и качаем саму библиотеку. Далее нам нужен будет специальный файл со шрифтом. Для этого выбираем нужный нам ТруТайп шрифт и конвертируем его. Подключаем к странице вот так:

<html>
<head>
<title>Тестируем typeface.js</title>
<!-- сначала грузим любые внешние файлы стилей -->
<link rel="stylesheet" type="text/css" ref="/style.css">

<!-- потом грузим библиотеку и файлы шрифтов -->
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>

<body>
<!-- А тут уже можно добавить стилей к шрифту с помощью CSS -->
<div class="myclass typeface-js" style="font-family: Helvetiker">
Немного пробного текста, чтобы посмотреть что и как...
</div>
</body>
</html>

Вы также можете посмотреть примеры или почитать подробнее об особенностях установки на сайте проекта. Довольно удобная качественная вещь.

Cufon

Еще одно решение, тоже на js + SVG/VML. Собственно, принцип работы и порядок действий такой же, как у typeface.js. Как плюс можно отметить, что есть поддержка не только .TTF, но и .OTF шрифтов.

Идем на сайт проекта, качаем библиотеку и генерируем файл шрифта (ух, как много полей). Теперь имплементим на сайт.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Библиотеке -->
<script src="cufon-yui.js" type="text/javascript"></script>

<!-- Файл шрифта -->
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>

<!-- Указываем, к чему применить шрифт (в данном случае ко всем заголовкам h1) -->
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>Пример заголовка первого уровня</h1>
</body>
</html>

Опять же, советую почитать про особенности установки более подробно.

sIFR

Сифру, помимо js, для работы необходим флеш плагин в браузере. Кроме того, чтобы сделать файл шрифта для Сифра, вам понадобиться редактор Флеша (например, Адоб Флеш КС4) или желание овладеть экспериментальной техникой без редактора 😉

В общем и целом, исходя из описания установки, могу сказать, что процесс не такой простой, как у Фонтфейса и и Куфона.

FLIR

Эта штука заменяет указанные вами части текста… картинками. Вот такое, с одной стороны, оригинальное, а с другой, привычное решение.

Для работы необходимо иметь PHP (желательно пятый) и GD на сервере. На сервере-то как раз и будут происходить все операции со шрифтами. На клиенте же нужно только задать правила, как и что заменять.

Думаю, что при грамотном использовании, эти скрипты смогут помочь вам делать сайты более интересными, удобными и красивыми. Только не переусердствуйте с заменой шрифтов.

Спонсор поста World ProgramsСайты для бизнеса

Навигация по записям