font-face – jak przygotować czcionkę do wykorzystania na stronie

Krzysiek Furtak CSS 0 Comments

Od kiedy wszystkie popularne przeglądarki zaczęły wspierać selektor @font-face, w dziedzinie projektowania stron internetowych nastąpił swego rodzaju przełom. Szczególnie, że (uwaga – będzie szok) IE7 także wspiera font-face’a. No może „wspiera” to za dużo powiedziane, powiedzmy że akceptuje 🙂 IE będzie chciał od nas specjalnego rozszerzenia czcionki, plus musimy zastosować mały trik, ale generalnie wszystko ładnie działa. Minusem może być fakt, że użytkownik, będzie miał do ściągnięcia kilka kilobajtów więcej, a co za tym idzie czas wczytywania strony się wydłuży. Jednak moim zdaniem, przy takich transferach jakie oferują aktualnie dostawcy sieci, to nie jest problem. Jak zobaczycie na jednym ze screenów poniżej, wygenerowane pliki czcionek ważą od 17 do 35KB. To chyba nie jest duża cena, którą trzeba zapłacić za serwis, który będzie o wiele bardziej atrakcyjniejszy dla jego gości.

Font-Face Kit Generator

OK dość teorii, czas na czyny 🙂 Pierwsze co musimy zrobić (zakładając, że mamy już wybraną czcionkę, którą chcemy umieścić na stronie), to wygenerować odpowiednie rozszerzenia czcionek. Na szczęście jest na to bardzo prosty sposób. Skorzystamy z narzędzia jakie udostępnia serwis FontSquirrel.com Znajdziemy je na stronie http://www.fontsquirrel.com/fontface/generator

Aby dodać czcionkę, wystarczy kliknąć w przycisk „Add fonts”, wybrać czcionkę z naszego komputera i zaakceptować. Teoretycznie moglibyśmy w tym miejscu zakończyć, ale niestety narzędzie domyślnie nie uwzględnia polskich literek (nawet jeśli czcionka je obsługuje). Dlatego musimy wykonać dodatkowe czynności.

Najpierw zaznaczamy opcje „Expert…”, odznaczamy format czcionki SVG – nie będzie nam on potrzebny.

Poniżej tych opcji w bloczku „Subsetting” zaznaczamy opcję „Custom subsetting…”. Poniżej tej opcji pokaże nam się dodatkowy formularz, w którym zaznaczamy opcję „Language:” – „Polish”. W ten sposób do czcionki zostaną dołączone polskie literki. Teraz wystarczy tylko zaakceptować regulamin (opcja zaznaczona na czerwono) i kliknąć w przycisk „Download Your Kit”.

INFO: Pamiętajmy, że czcionka musi posiadać polskie znaki, żeby włączenie powyższej opcji dało jakikolwiek efekt.

Jak sprawdzić czy dana czcionka na FontSquirrel.com posiada polskie literki?

Po ściągnięciu archiwum ze strony i jego rozpakowaniu kopiujemy pliki czcionek (zaznaczone na screenie) do katalogu na serwerze. W pliku stylesheet.css mamy gotowy selektor, który kopiujemy do naszego pliku CSS.

@font-face {
    font-family: 'CapsuulaRegular';
    src: url('capsuula-webfont.eot');
    src: url('capsuula-webfont.eot?#iefix') format('embedded-opentype'),
    url('capsuula-webfont.woff') format('woff'),
    url('capsuula-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

INFO: Pamiętajmy o ustawieniu odpowiednich ścieżek do plików czcionek 🙂

Teraz do dowolnego elementu na naszej stronie możemy przypisać tą czcionkę:

h1, h2, h3, h4{
    font-family: 'CapsuulaRegular', Arial, Tahoma, sans-serif;
}

I to wszystko – możemy się cieszyć fajną czcionką na naszej stronie www.