Встроить нестандартный шрифт в сайт

Опубликовано автором

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

Для этого нужно сделать следующее:

<style>
@font-face {
    font-family: "myfont";
    src: url("output.ttf") format("truetype");
}
</style>
<!--[if IE]>
    <style>
    @font-face {
        font-family: "myfont";
        src: url("output.eot");
    }
    </style>
<![endif]-->
<div style="font-family:myfont">
Hello, World!
</div>

где URL это путь к файлу шрифта.

Так как IE использует шрифты .eot и вы имеете шрифт формата .ttf Вам нужно переконвертировать ваш шрифт.

Для этого делаем так:

качаем вот эту програмку ttf2eot.exe и ложим его на диск С.

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

C:\>ttf2eot.exe c:\windows\fonts\arial.ttf c:\output.eot

где C:\>ttf2eot.exe путь к программе, c:\windows\fonts\arial.ttf путь к шрифту, c:\output.eot куда сохраняется новый шрифт.

В итоге вы имеете шрифт для ИЕ и спокойно его подключаете.

Все же советую стараться использовать стандартные шрифты, типа Arial, Tahoma, Times New Roman.

А на этом пост Встроить нестандартный шрифт в сайт закончен. Всем спасибо за внимание!
Яcreated’s blog

Получать обновления ЯcReated’s blog:



Читайте также:

Встроить нестандартный шрифт в сайт: 13 комментариев

  1. Спасибо. Очень четко кратно и точно… Талантливо! 🙂

  2. классно и просто, только в Mozilla Firefox не работает…

    • Все работает, просто оснавная ошибка людей в том что названия файла шрифта не всегда является именно названием шрифта и из-за этого шрифт не подключается.

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

    От: Majordomo <support@majordomo.ru>
    > Reply-to: Majordomo <support@majordomo.ru>
    > Дата: Sat, 12 Jun 2010 18:38:25 +0400
    >
    > Здравствуйте.
    >
    > Поправили — внесли в конфигурацию VirtualHost'а сайта директиву
    > AddType application/x-font .ttf
    >
    > Проблема заключалась в том, что Апач отдавал Ваш файл .ttf как plaintext, и браузеры не воспринимали его именно как шрифт.

  5. Спасибо!!! Мучился 5 дней, пробовал множество сложных способов но все работало не правильно, и вот после вашего поста решил попробовать такой способ, и все получилось!!!

Обсуждение закрыто.