CSS. Добавление текста с уникальными шрифтами. Свой шрифт и CSS.

Озадачился как-то раз сделать надписи на сайте экзотическим шрифтом, порыл естественно кучу форумов и всяких статеек невнятных. Раньше CSS не было и чтобы нужный шрифт нормально отображался у пользователя в браузере, нужно было, чтобы этот шрифт был установлен в системе. Это конечно хорошо, но уникальные шрифты всем же не поставишь. В итоге нормально можно было пользоваться только встроенными шрифтами, т.е. теми, что есть в вендятине, линухе и т.п., либо через дико извращенские способы их прикручивать к страницам. С выходом CSS и html 5.0 (Cascading Style Sheets — каскадные таблицы стилей) наконец-то ситуация переломилась и появилось решение более простое и рабочее.

Браузер теперь может подгружать шрифты с сайта и показывать их на странице. Но опять же, браузеров тоже существует многа, и не каждый хочет кушать, например ttf шрифты. Некоторым например подавай шрифты в svg, другим в EOM. Сейчас вроде браузятники договорились и ttf поедают все, проверил недавно на нескольких свежих браузерах, поэтому речь пойдет о прикрутке только ttf шрифтов.
Открываем вашу каскадную табличку (файл css) к вашему сайту, или теме форума, теме сайта, например. В самом начале объявляем где накопать шрифты, как их зовут и как их показывать:

@font-face {
font-family: 'megoshrift';
src: url('fonts/megoshrift.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: ‘scupershrift’;
src: url(‘fonts/scupershrift.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

Здесь,
font-family — это погоняло шрифта здесь в этом файле, чтобы к нему можно было как-то обращаться.
src: — путь к шрифту и его тип. Долго экспериментировал с путями и ничего не выходило, пока рядом с файлом css не положил папку fonts и в нее затолкал все описываемые шрифты. Будьте внимательны при указании пути со шрифтом. Шрифт должен скачиваться по ссылке, указанной в пути, как файл шрифта напрямую.
font-weight — вес шрифта.
font-style — стиль шрифта.

Вставлять в код в принципе не сложно. Вот пример кода для PunBB Темы форума:

.pun h1 {
font: 2.154em/1.6em "megoshrift", Arial, Helvetica, sans-serif;
padding: 7px 0;
}

А вот кусок кода для WordPress:

h1.site-title {
font-family: 'csupershrift';
font-size: 3em; /* 28px */
font-weight: 1000;
line-height: 1.0;
margin: 0;
}

Собственно все. Надеюсь кому-то будет полезным.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

CAPTCHA изображение

*