Подключаем к сайту свой шрифт
Шрифты, шрифты, как сложно оставаться в рамках дозволенного и при этом творить что-то прекрасное. Часто в веб-проектах хочется использовать нестандартные, не предусмотренные системой шрифты. Но тут встаёт вопрос о том, чтобы все видели именно то, что хотим мы.
Я советую в данной ситуаци воспользоваться прекрасным сервисом Cufon, который предлагает вам привязать ваш сторонний шрифт к сайту. Способ основан на создании JavaScript библиотеки с выбранным шрифтом, и последующий рендеринг требуемых надписей.
Самые приятные вещи в cufon — это кроссбраузерность и индексируемость поисковыми ботами текста. То-есть с технической точки зрения подключение шрифта не может повредить вашему сайту. Тем более основная библиотека весит чрезвычайно мало.
Перейдём непосредственно к мануалу по установке:
1. Первым делом нам потребуется скачать библиотеку cufon
2. Отправляемся на их сайт и генерируем файл шрифта.
Постараюсь описать по порядку основные пункты, которые вам стоит учесть при генерации файла шрифтов.
- Изначально нам нужно загрузить оригинальный файл шрифта. Вообще достаточно загрузить его в Regular typeface, если вам от шрифта не требуется специально начертания bold, italic или bold italic.
- Выставляем галки на нужных нам символах из данного шрифта. Допустим вам нужны только латинские символы… Для этого достаточно поставить галку напротив Basic Latin.
- Листаем в самый низ страницы и ставим галку напротив I acknowledge and accept these terms, тем самым соглашаясь с условиями лицензии.
- Жмём на большую синююю кнопку «Let’s do this!»
3. Скидываем библиотеку и файл со шрифтом куда-нибудь в корень сайта, допустим в папку js. Подключаем их к сайту, вставив код до закрывающего тега </head>:
4. Прописываем далее ещё несколько строк кода, которые показывают какие элементы будут написаны данным шрифтом. Допустим я для подобных целей буду использовать придуманный мной тег <shrift>, тогда нам нужно будет прописать код:
<script type="text/javascript">// <![CDATA[
Cufon.replace('shrift');
// ]]></script>
И для вывода строчки, написанной этим шрифтом нужно будет написать текст внутри этого тега:
Пример текста
Также можно прописать использование для уже существующих тегов, например для h1, чтобы применить шрифт ко всем заголовкам.
Не советую использовать для сайтов Граффити шрифты, так как при реализации символы будут очень не аккуратно налезать друг на друга, а и из-за большого количества изгибов получаются побочные эффекты в виде лесенок и прочих неровностей.
Ещё я бы посоветовал вам обратить внимание на Google fonts, так как там есть множество шрифтов, которые можно подключить к вашему сайту прямиком с серверов гугла.
Плюсы, минусы, сравнение с аналогами. Гдеее это все? Прально, вот тут — http://habrahabr.ru/blogs/webdev/61033/ =)
Ответить
Cufon это двухлетняя давность, к тому же не будет работать при выключенном js
Эстетствующие гики-самураи во всю используют @font-face
Ответить
1000 очков команде гиков-самураев :D
Ответить