Собственный шрифт

• О чем это?

  CSS дает возможность отображать текст любым шрифтом — даже, если он не установлен на компьютере посетителя страницы.

• Зачем это?

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

• Что нужно сделать?

  1. Для начала найти и выбрать шрифт. Русские шрифты можно поискать, например, тут:

  http://xfont.ru/russian/

  www.fonta.ru — а здесь даже есть вот такие очаровательные в ретро-стиле:
  

  2. После этого нам нужно загрузить этот шрифт на сайт.
  Допустим, мой шрифт загружен сюда — http://files.myopera.com/overly/others/IRINA__C.ttf

  3. Теперь открываем свой css-файл

  http://my.opera.com/ваше имя/account/usercss.dml#user-css-edit

  И добавляем код:

  @font-face {
   	font-family: название_вашего_шрифта;
   	src: url('путь_к_файлу_с_вашим_шрифтом');
   }

  После этого мы можем обращаться к этому шрифту, как к любому другому:

  — из css-файла (ниже код для заголовка блога, irinac — название моего шрифта, замените своим):

  #top h1 {font-family: irinac; font-size: 30px;}

  — # с любой страницы, если применяем шрифт к тексту поста (в комментариях не работает):

  образец текста

  </p><p style="font-family: irinac">образец текста</p>

  или проще

  [FONT=irinac]образец[/FONT]

Главное, не переборщить 🙂

Update

Если нужна поддержка IE (оказалось, в IE всё сложнее).

Нужно сконвертировать шрифт в формат *.eot сделать это можно, например, на этом сайте, закачать его вместе с изначальным шрифтом и в user.css указать:

@font-face {  
 	  font-family: название_вашего_шрифта;  
 	  src: url('путь_к_шрифту_eot/шрифт.eot'); /* IE */  
 	  src: local("настоящее_название_шрифта"), url('путь_к_шрифту_ttf/шрифт.ttf') format("truetype"); /* non-IE */  
 	}

Вместо настоящего названия можно указать любое, но настоящее позволит найти шрифт, если он уже установлен на компьютере посетителя сайта и не скачивать его заново.

Всё, что я писал о css для my.opera.com