Вграждане на шрифтове в уеб страници

Safari 3.1 и Firefox 3.5 поддържат вграждане на шрифтове в уеб страници само с помощта на CSS. Звучи като нова ера в уеб типографията. Рай на земята. Реших да си сменя шрифта на блога и стана ясно, че не всичко е толкова розово.

Първият проблем е лицензирането. Повечето комерсиални шрифтове забраняват разпространението под каквато и да е форма. Така на разположение остават само безплатните шрифтове и тези, чиито лицензи специално позволяват вграждане. Излишно е да казвам, че и в двете категории хубавите шрифтове са малко. Със сигурност в следващите години ситуацията с лицензирането на шрифтове ще се промени, но няма да е днес. Или утре.

Вторият проблем е кирилицата. Дори да си намерите удобен за вграждане шрифт, шансът да поддържа кирилица е минимален. Шансът хубавият ви кирилски шрифт да разрешава вграждане също е минимален.

С малко зор, намерих два подходящи шрифта:

Gentium

Свободен шрифт, чиято цел е да помогне добрата типография да достигне до повече езици. Красив, серифен, поддържа кирилица. Хубаво. Освен кирилица, обаче, Gentium поддържа и още вагон езици. Резултатът е 356 КБ файл.

След много орязване (и работа с програмата с най-ужасен интерфейс) на другите кодировки и на ударени букви и лигатури, стигнах до Gentium Latin-Cyrillic. Само 120 КБ. Свободни шрифтове FTW! Производният шрифт нямаше да е законен, ако Gentium не беше пуснат под Open Font License.

Сваляне на Gentium Latin-Cyrillic

Graublau Sans Web

Безплатен, sans-serif, поддържа кирилица. 40 КБ. Специално правен за вграждане в уеб като по-малкия брат на Graublau Sans Pro. В бъдеще все по-често ще виждаме web версии на pro шрифтове.

Това бяха двата шрифта от мен. Ако знаете за още, моля споделете ги.

Вграждането на практика

Като експеримент, реших да използвам Graublau Sans Web за текста в блога, а Graublau Sans Web Bold за заглавията.

CSS правилата са прости:

@font-face {
    font-family: GraublauWeb;
    font-style: normal;
    font-weight: normal; 
    src: url(fonts/GraublauWeb.otf);
} 
@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    font-style: normal;
    src: url(fonts/GraublauWebBold.otf);
}

Пътят към шрифтовете трябва да е или абсолютен, или относителен спрямо CSS файла. Ако пътят е абсолютен, файлът трябва да се намира на същия домейн като страницата.

Интересно е, че в Safari текстът не се показва, докато шрифтът не се изтегли. Във Firefox пък, докато файлът се тегли, текстът се вижда с някой вграден шрифт и после се сменят, което дразни.

Накрая

Сега му е времето да си поиграете с типографията в уеб. Още ѝ е рано за сериозна употреба, но поне бъдещето ѝ е светло.