Вы здесь

Подключение к сайту нестандартных шрифтов

Шрифты, шрифты, как сложно оставаться в рамках дозволенного и при этом творить что-то прекрасное. Часто в веб-проектах хочется использовать нестандартные, не предусмотренные системой шрифты. Но тут встаёт вопрос  о том, чтобы все видели именно то, что хотим мы.

Я советую в данной ситуаци воспользоваться прекрасным сервисом Cufon, который предлагает вам привязать ваш сторонний шрифт к сайту. Способ основан на создании JavaScript библиотеки с выбранным шрифтом, и последующий рендеринг требуемых надписей.

Самые приятные вещи в cufon — это кроссбраузерность и индексируемость поисковыми ботами текста. То-есть с технической точки зрения подключение шрифта не может повредить вашему сайту. Тем более основная библиотека весит чрезвычайно мало.

Перейдём непосредственно к мануалу по установке:

1. Первым делом нам потребуется скачать библиотеку cufon

2. Отправляемся на их сайт и генерируем файл шрифта.

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

  • Изначально нам нужно загрузить оригинальный файл шрифта. Вообще достаточно загрузить его в Regular typeface, если вам от шрифта не требуется специально начертания bolditalic илиbold italic.
  • Выставляем галки на нужных нам символах из данного шрифта.  Допустим вам нужны только латинские символы… Для этого достаточно поставить галку напротив Basic Latin.
  • Листаем в самый низ страницы и ставим галку напротив I acknowledge and accept these terms,тем самым соглашаясь с условиями лицензии.
  • Жмём на большую синююю кнопку «Let’s do this!»

3.  Скидываем библиотеку и файл со шрифтом куда-нибудь в корень сайта, допустим в папку js. Подключаем их к сайту, вставив код до закрывающего тега </head>:

1
2
<pre><script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/имя_файла_сгенерированного_шрифта"></script></pre>

4. Прописываем далее ещё несколько строк кода, которые показывают какие элементы будут написаны данным шрифтом. Допустим я для подобных целей буду использовать придуманный мной тег <shrift>, тогда нам нужно будет прописать код:

1
2
3
<pre><script type="text/javascript">
  Cufon.replace('shrift');
</script></pre>

И для вывода строчки, написанной этим шрифтом нужно будет написать текст внутри этого тега:

1
<shrift>Пример текста</shrift>

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

Ещё я бы посоветовал вам обратить внимание на Google fonts, так как там есть множество шрифтов, которые можно подключить к вашему сайту прямиком с серверов гугла

Автора автора