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

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

— Любая версия 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
  1.  
  2. @font-face {
  3. font-family: 'Jura-Regular';
  4. src: url('../fonts/Jura-Regular.eot');
  5. src: url('../fonts/Jura-Regular.eot?#iefix') format('embedded-opentype'),
  6. url('../fonts/Jura-Regular.woff') format('woff'),
  7. url('../fonts/Jura-Regular.ttf') format('truetype'),
  8. url('../fonts/Jura-Regular.svg#DefaultBold') format('svg');
  9. font-weight: normal;
  10. }
  11.  
а ниже как обычно
  1. body{
  2. margin:0px;
  3. padding:0px;
  4. height:100%;
  5. font-size:13px;
  6. font-family:"Jura-Regular"
  7. }
PS Да вот еще что, тот сайт который онлайн конвертирует типы шрифтов не совсем корректно сделал EOT, так что пришлось качать конвертер TTF в EOT вот отсюда www.eotfast.com/ как им пользоваться есть видео на сайте.
+3
Юра Юра 10 лет назад #
Некоторые шрифты можно легко вставить с помощью сервиса от гугла - http://www.google.com/webfonts#ChoosePlace:select
0
Михаил Михаил 10 лет назад #
в opere и exploer 8 не пашет
0
Михаил Михаил 10 лет назад #
прошу прошения только в opere
0
Нил™ Нил™ 10 лет назад #
интересно. Надо будет попробовать. Спасибо.

Еще от автора

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