Используем нестандартные шрифты на сайте

Когда делал этот сайт столкнулся с интересной проблемой отображения нестандартных шрифтов в различных браузерах. Когда я подключал шрифт в формате ttf через font-face, некоторые браузеры, такие как Хром, Мозилла не отображали его и заменяли каким-то системным. После того как я догадался, что причина именно в том, что шрифт в формате ttf как-то криво отображается браузером, решил конвертировать его в тот который будет отображаться правильно.

Методом научного тыка я быстро определил, что как нельзя лучше отображается и подходит для моих целей шрифт в формате otf. С помощью конвертера я на всякий случай конвертировал шрифт и в другие форматы eot, svg, ttf, woff. Это сделать достаточно просто, в интернете есть несколько достойных онлайн-конвертеров, не буду их тут озвучивать, в яндексе сможете легко найти самостоятельно. Тем более некоторые из них одновременно конвертируют в несколько форматов из одного. Не знаю, насколько это правильно с точки зрения каллиграфии и хорошего ли качества получаются шрифты при многократной переконвертации, но особой разницы я не заметил.

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

При создании сайта я всегда отключаю в htaccess возможное кэширование со стороны сервера, следующими командами:

<IfModule mod_headers.c>
Header append Cache-Control "no-store, no-cache, must-revalidate"
</IfModule>


<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "now"
</IfModule>

Это позволяет избежать многих проблем с обновлением информации.

Затем в css стилях подключаем нужный нам шрифт:

@font-face { font-family: HeliosCond; src: url(fonts/helios-cond-bold.otf); }

Вы наверное заметили, что я подключаю шрифт не в формате ttf, а в otf. Как вы помните проблема была в том, что шрифт в формате ttf не корректно отображался некоторыми распространенными браузерами. Пришлось конвертировать его в otf, который уже правильно отображается всеми браузерами. Использовать подключенный шрифт очень просто, покажу это на примерах заголовков с этим шрифтом.

h2, h2 a:link, h2 a:visited, h2 a:active { font-family: HeliosCond; background: none; font-size:33px; text-decoration:none; margin-bottom: 10px; }

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

Добавить комментарий


Защитный код
Обновить

Еще информация на эту тему:
Топ 10 записей в блоге: