Любой шрифт в любом браузере на вашем сайте

6862
Хочу поделиться, как установить любой шрифт себе на сайт. Все браузеры понимают нестандартные шрифты, но каждый понимает как правило по своему:)
Вот перечень браузеров и шрифтов к ним:

- Любая версия Internet Explorer понимает шрифт типа - EOT;
- Firefox начиная с версии 3.5 понимает – TTF и OTF (а с версии 3,6 научился понимать WOFF);
- Opera, начиная с 10 версии, работает с - TTF и OTF шрифтами;
- Все версии GoogleChrome понимают SVG шрифты, но в 2010 г научился читать всеми любимые TTF и OTF;
- В Safari, начиная с версии 3.2, работает с TTF и OTF шрифтами.

Соответственно нужно иметь ваш шрифт во всех форматах TTF OTF WOFF SVG и EOT, чтоб корректно отображался во всех браузерах. Если шрифт во все форматах есть, то все хорошо, если нет, то тоже все хорошо. Идем на сайт http://onlinefontconverter.com/ регистрируемся, загружаем на сайт свой TTF шрифт в свои шрифты. И далее жмем на нужный вам формат шрифта. Сервис его конвертанет и даст скачать.
Все что он сконвертировал, т.е. ваш шрифт с новыми расширениями OTF, WOFF, SVG, EOT и исходный TTF загружаем на сервер в папку /FONTS


Дальше подключаем шрифт в вашем CSS файле с помощью свойства @font-face
то есть назначаем шрифт, который потом можно использовать с помощью обычного font-family:

Потом, где вам надо просто как обычно прописываем стили с новым "ВАШИМ" шрифтом, я для примера взял шрифт Jura-Regular.ttf и проделал с ним все описанные операции.
например шрифт для всего сайта пишем в css сначала этот код с @font-face
Код PHP:
@font-face {
    font-family: 'Jura-Regular';
    src: url('../fonts/Jura-Regular.eot');
    src: url('../fonts/Jura-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Jura-Regular.woff') format('woff'),
         url('../fonts/Jura-Regular.ttf') format('truetype'),
         url('../fonts/Jura-Regular.svg#DefaultBold') format('svg');
    font-weight: normal;
}
а ниже как обычно
Код PHP:
body{
	margin:0px;
	padding:0px;
	height:100%;
	font-size:13px;
	font-family:"Jura-Regular"
}
PS Да вот еще что, тот сайт который онлайн конвертирует типы шрифтов не совсем корректно сделал EOT , так что пришлось качать конвертер TTF в EOT вот отсюда http://www.eotfast.com/ как им пользоваться есть видео на сайте.
Кроссбраузерное решение для закруглений и прозрачностей
Теги: шрифты, woff, ttf
Комментарии (4)
Юра 24 октября 2011 в 20:32 +3
Некоторые шрифты можно легко вставить с помощью сервиса от гугла - http://www.google.com/webfonts#ChoosePlace:select
Михаил 31 октября 2011 в 12:35 0
в opere и exploer 8 не пашет
Михаил 31 октября 2011 в 12:46 0
прошу прошения только в opere
Нил™ 17 мая 2012 в 02:12 0
интересно. Надо будет попробовать. Спасибо.