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

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

— Любая версия 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, чтоб корректно отображался во всех браузерах. Если шрифт во все форматах есть, то все хорошо, если нет, то тоже все хорошо. Идем на сайт onlinefontconverter.com/ регистрируемся, загружаем на сайт свой TTF шрифт в свои шрифты. И далее жмем на нужный вам формат шрифта. Сервис его конвертанет и даст скачать.
Все что он сконвертировал, т.е. ваш шрифт с новыми расширениями OTF, WOFF, SVG, EOT и исходный TTF загружаем на сервер в папку /FONTS

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

Потом, где вам надо просто как обычно прописываем стили с новым "ВАШИМ" шрифтом, я для примера взял шрифт Jura-Regular.ttf и проделал с ним все описанные операции.
например шрифт для всего сайта пишем в css сначала этот код с @font-face

 
@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;
}

а ниже как обычно

body{
	margin:0px;
	padding:0px;
	height:100%;
	font-size:13px;
	font-family:"Jura-Regular"
}

PS Да вот еще что, тот сайт который онлайн конвертирует типы шрифтов не совсем корректно сделал EOT, так что пришлось качать конвертер TTF в EOT вот отсюда www.eotfast.com/ как им пользоваться есть видео на сайте.

Кроссбраузерное решение для закруглений и прозрачностей

ttf woff шрифты