Aby wykorzystać czcionki nieobecne w lokalnym komputerze, należy wykorzystać „przepis na font”, regułę („at-rule”); w tym wypadku „przepis” ma postać: @font-face. Składnia reguły @font-face jest następująca:
<HTML>
<HEAD>
<TITLE>Przepis na czcionki</TITLE>
<STYLE type="text/css">
@font-face {
font-family: Felix Titling;
font-style: normal;
font-weight: normal;
src: url(https://www.serwer.com/demo/FELIXTI0.eot);
/* to są tzw. deskryptory, */
/* które opisują czcionkę: */
/* jej rodzaj oraz inne atrybuty */
/* a także lokalizację na serwerze */
}
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>W powyższym przykładzie zastosowaną czcionką jest Felix Titling, którą udostępniamy w formacie .eot (’Embedded OpenType’). Technologia OpenType pozwala osadzić w dokumencie HTML czcionki, jakich nie nie ma w lokalnym systemie. Format .eot określa m.in. skompresowany podzestaw użytych na stronie znaków (i tylko tych znaków) oraz wskazuje na dokładną lokalizację serwera, skąd pobierane będą czcionki .eot. Przeniesienie lub skopiowanie pliku . eot na inny serwer jest nieskuteczne, tzn. nie można tej czcionki użyć poza „macierzystym” serwerem (aczkolwiek można zadeklarować pewną liczbę alternatywnych serwerów). Zapobiega to niekontrolowanej dystrybucji całych zestawów czcionek i chroni prawa oraz interesy producentów fontów. Po ściągnięciu pliku .eot na lokalną maszynę podzestaw znaków jest konwertowany do formatu TrueType.
Deklarację stylu na stronie HTML należy uzupełnić o element lub klasyfikator, do którego zastosujemy czcionkę osadzoną i oto już możemy podziwiać klasyczne piękno czcionki Felix Titling:
<HTML>
<HEAD>
<TITLE>Czcionki osadzane</TITLE>
<STYLE type="text/css">
@font-face {
font-family: Felix Titling;
font-style: normal;
font-weight: normal;
src: url(https://www.serwer.com/demo/FELIXTI0.eot);
}
.n1 { font-family: "Felix Titling";
font-weight: normal;
text-align: center;
}
</STYLE>
</HEAD>
<BODY
<H1> To jest czcionka Felix Titling </H1>
</BODY>
</HTML>Osadzanie na stronach WWW własnych czcionek w technologii OpenType jest możliwe dzięki darmowemu programowi Weft firmy Microsoft.