CSS3 - jak korzystać z własnych czcionek

Zazwyczaj projekty naszych stron www wyglądają fantastycznie w Photoshopie lub innych narzędziach do projektowania graficznego. W dużej mierze przyczyniają się do tego piękne, nietypowe czcionki użyte w projekcie. Niestety, nie każdy odwiedzający naszą witrynę posiada zainstalowane lokalnie czcionki przez nas użyte i w efekcie wygląda ona wówczas znacznie mniej atrakcyjnie.

Jak poradzić sobie z tym problemem? Jedną z metod jest wykorzystanie arkuszy stylów CSS3, które umożliwiają użycie i poprawne wyświetlenie dowolnej czcionki umieszczonej razem z Twoją stroną na serwerze bez względu na  to czy użytkownik posiada ją zainstalowaną lokalnie na swoim komputerze lub urzadzeniu czy nie.

Oto, jak w kilku krokach dołączyć własną czcionkę na stronie www:

Załaduj czcionkę

Upewnij się, że czcionka, której chcesz użyć posiada licencję na użycie na stronie www. Prawie wszystkie darmowe czcionki mogą być użyte na stronach, a także wiele licencjonowanych czcionek jest dostępnych na licencji zezwalającej ich użycie na stronie www.
Następnie załaduj wybraną czcionkę na serwer. Możesz przechowywać ją w osobnym folderze czcionek, np. fonts, ale jest to opcjonalne. Pamiętaj, aby dołączyć pliki z każdą odmianą czcionki, którą planujesz użyć, taką jak pogrubienie czy kursywa.

Dodaj sekcję font-face w twoim kodzie CSS

Otwórz plik html lub plik arkusza styli CSS strony, nad którą pracujesz. Dodaj deklarację font-face do kodu:

@font-face {
}

Wewnątrz sekcji font-face, nadaj czcionce nazwę, za pomocą której będziesz się później do niej odwoływał:

font-family: ‘lovelyFont’;

Następnie wskaż lokalizację pliku czcionki w formacie EOT:

src:
url('fonts/lovely_font.eot');

src:
url('fonts/lovely_font.otf');

src:
url('fonts/lovely_font.ttf');

src:
url('fonts/lovely_font.otf')
format('opentype');

src:
url('fonts/lovely_font.ttf')
format('truetype');

src:
local('Lovely Font'),
local('Lovely-Font'),
url('fonts/lovely_font.otf')
format('opentype');

src:
local('Lovely Font'),
local('Lovely-Font'),
url('fonts/lovely_font.ttf')
format('truetype');

W powyższym przykładzie wpis specyfikujący lokalną czcionkę pojawia się dwa razy, gdyż nazwa czcionki jest dwuczłonowa. Nazwa w wersji z łącznikiem przeznaczona jest dla systemów operacyjnych, które zapamiętują nazwy czcionek w ten sposób. Dodatkowy wiersz nie jest konieczny gdy nazwa czcionki jest jednowyrazowa. Jeśli wiesz, że czcionka może mieć różne nazwy w różnych systemach operacyjnych, dołącz obie wersje w sekcji local.

Zastosuj czcionkę do elementów strony

W końcu możemy użyć zdefiniowaną czcionkę do wybranych elementów strony. W kodzie CSS wybranego elementu lub grupy elementów wyspecyfikuj nazwę czcionki, której chcesz użyć:

div { font-family: 'lovelyFont', sans-serif; }

Uwzględnij odmiany czcionki

W przypadku gdy chcesz także użyć pogrubionej odmiany czcionki, dołącz kolejną sekcję font-face z adresem URL do pliku odpowiedniej wersji oraz deklarację „font-weight:bold;”. W dodanej sekcji użyj tych samych elementów specyfikacji jak w przypadku domyślnej wersji czcionki, a przeglądarka automatycznie zastosuje ją do odpowiednich elementów strony:

/*default version*/
@font-face {

font-family: 'lovelyFont';
src: url('fonts/lovely_font.eot');
src:
  local('Lovely Font'),
  local('Lovely-Font'),
  url('fonts/lovely_font.otf')
  format('opentype');
}


/*bold version*/
@font-face {

font-family: 'lovelyFont';
src: url('fonts/lovely_font_bold.eot');
src:
  local('Lovely Font Bold'),
  local('Lovely-Font-Bold'),
  url('fonts/lovely_font_bold.otf')
  format('opentype');
font-weight: bold;
}

/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }

Jak ułatwić sobie życie?

Możesz skorzystać z narzędzi, które wygenerują dla Ciebie cały kod niezbedny do tego aby wykorzystać font-face i czcionki jakie użyłeś w projekcie swojej strony. Taki bezpłatny generator dostępny on-line znajdziesz pod adresem http://www.fontsquirrel.com/fontface/generator.

Inne metody związane z wykorzystaniem niestandardowych czcionek takie jak Cufón, Google Fonts i im podobne przedstawimy w kolejnych artykułach.