Использование нестандартных шрифтов в дизайне

Началось всё с того, что я решил прикрутить шрифт calibri, который по-умолчанию в windows 7 и microsoft office к своему сайту. По сути - это тот же arial, но более сглаженный и приятнее для восприятия.

Погуглив немного, нашёл несколько вариантов решения:

1. Через java script. Скрипт берёт шрифты и рисует их на вашем сайте. Прелесть способа в том, что работает 100% во всех браузерах без каких-либо затруднений. Ребята из templatemonster (кто не в курсе - это крупнейший торговец шаблонами сайтов в мире) пользуются исключительно только таким способом.

Мне этот способ пришёлся не по душе, не знаю почему, но кому интересно почитать, то прочитать в подробностях можно тут.

2. Font-face - лучший способ.

В стилях прописываем:

@font-face {
 font-family: 'Tagesschrift';
 src: url('tagesschrift.ttf'); 
}

А так же:

h1,h2,h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Вот и всё, будет работать во всех последних браузерах.

Ну а если нужна поддержка старых версий браузеров, то тогда стили будут следующие:

@font-face {
 font-family: 'Tagesschrift';
 src: url('tagesschrift.eot'); /* IE 5-8 */
 src: local('☺'),       /* sneakily trick IE */
    url('tagesschrift.woff') format('woff'),  /* FF 3.6, Chrome 5, IE9 */
    url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
    url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Подробнее тут.

3. Google API.

Способ не лучший, но точно самый простой. Подцепляем стиль с сайта google:

<link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">

А дальше указываем font-family: 'Tangerine', serif;

Вот и всё. Полный список шрифтов можно у видеть на сайте сервиса.

Наслаждайтесь :)