Можно нарезать картинок на все заголовки и т.п. куда нужно, но мы пойдем более хитрым путем.
Будем использовать такую вещь, как Cufon.
Ниже я вам дам ссылку где про этот метод написано больше букаф, а тут расскажу вкратце что нужно делать (это же шпаргалка :) ).
Сначала нужно найти сам файл со шрифтом.
Пусть, например, это будет Neutra.ttf.
Теперь нам нужно сгенерировать js, который определяет этот шрифт.
Для этого идем на cufon.shoqolate.com/generate/, кидаем в поле «Regular typeface» шрифт, ставим галочки в «The EULAs of these fonts allow Web Embedding (without Adobe Flash)» и «I acknowledge and accept these terms», и жмем «Let's do this!».
На выходе получаем Neutra_Display_Thin_500.font.js.
С этим js и будет работать Cufon.
Теперь скачиваем сам Cufon: cufon.shoqolate.com/js/cufon-yui.js
Осталось подключить эти 2 скрипта в документ, и выбрать к каким элементам следует применить шрифт.
<script type="text/javascript" src="Neutra_Display_Thin_500.font.js"></script>
<script type="text/javascript">
Cufon.replace("h1");
</script>
Вот и всё, в данном случае к заголовку h1 будет применен шрифт Neutra.
Стили (цвет, размер и т.п.) для этого заголовка будут спокойно применяться.
Если вы хотите применить шрифт для отдельных классов элементов, например .neutra, то вам придется использовать одну из библиотек, например jQuery.
Такой ход от разработчиков объясняется тем, чтобы не утяжелять свой скрипт дублирующими функциями, аналогичными популярным библиотекам (Prototype, jQuery, MooTools, Dojo).
Что есть разумный шаг, т.к. почти ни один проект уже не обходиться без них.
Итак, пример:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Нестандартный шрифт на сайт</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Neutra_Display_Thin_500.font.js"></script>
<script type="text/javascript">
Cufon.replace("h1");
Cufon.replace(".neutra"); // С помощью jquery можно обращаться и по классам
</script>
</head>
<body>
<p>Демонстрация применения нестнадартного шрифта.</p>
<h1>Hello, world!</h1>
<p>Hello, world! I'm <span class="neutra">Neutra</span>!</p>
</body>
</html>
Разработчики для пользователей ие рекомендуют вставлять сразу перед </body>, либо перед вызовом любого внешнего скрипта, например гугл аналитикс, следующую строку:
<script type="text/javascript"> Cufon.now(); </script>Это должно снизить задержку перед подменой шрифта на сайте, что особо заметно, когда скрипту беспощадно отдают целые абзацы текста, что явно не рекомендуется ヅ