Czasami zdarza się, że korzystamy na stronie z niestandardowych czcionek - takich, których nie ma we wszystkich systemach operacyjnych. W takich wypadkach możemy wgrać plik ttf (jest to format czcionek obsługiwany przez wszystkie popularne systemy operacyjne - jedynie IE akceptuje tylko format własnościowy eot), a następnie używać tej czcionki w arkuszu CSS.
Jak korzystać z wybranej czcionki?
Najpierw musimy zdefiniować nazwę dla czcionki. Skorzystamy tutaj z reguły @font-face. Wzór dla tej reguły jest taki:
@font-face {
font-family: nazwa-której-będziemy-używać;
src: local("nazwa_lokalna") url("adres") [format("format")];
[font-weight: grubość;]
[font-style: styl;]
}
Nazwa zapisana w font-family nie może zawierać białych znaków (spacji, tabulatorów itp.). Teraz omówię krótko cechę src. Obowiązkowa jest tutaj jedna z wartości url lub local. Pierwsza z nich służy do wskazania adresu url, gdzie znajduje się plik z czcionką. Wartość local pozwala na ustawienie nazwy czcionki, która ma być znaleziona na komputerze użytkownika. Jeśli takiej nie będzie, przeglądarka dobierze inną, podobną. Wartość format, nie jest obowiązkowa i opisuje format czcionki.
Kolejne dwie cechy (własności) są całkowicie nieobowiązkowe. Definiują one kolejno grubość czcionki i jej styl.
Przykład użycia:
@font-face {
font-family: moja_czcionka;
src: url("fonts/moja_czcionka.ttf");
font-weight: bold;
}
p {
font-family: moja_czcionka, verdana;
font-size: 9pt;
color: #000;
}
Źródło: http://kacperkolodziej.com













