Началось всё с того, что я решил прикрутить шрифт 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;
Вот и всё. Полный список шрифтов можно у видеть на сайте сервиса.
Наслаждайтесь :)