Niestadardowa czcionka na stronie internetowej

We wcześniejszym wpisie na temat typografii na stronach internetowych wyjaśniłem jak należy stosować oraz czym jest typografia. Przeczytaj go zanim zaczniesz wgłębiać się w ten artykuł. Zaczynamy!

 

Słowem wstępu

W różnych miejscach sieci można spotkać czcionkę, której nie widzieliśmy do tej pory. Dodatkowo jest to tekst, który da się zaznaczyć czyli nie jest w formie grafiki. Dodatkowo, nie jest ona dostępna przez na system operacyjny. Dla niezorientowanych czcionki, które widzimy na stronie internetowej są pobierane z naszego Windowsa (czy innego systemu operacyjnego). Oznacza to, że zasób czcionek, które można wykorzystać na stronie internetowej jest ograniczona. Wynika to z faktu, że większość osób, nie instaluje nowych czcionek w systemie operacyjnym. Chyba, że zajmują się identyfikacją wizualną firm.

Standardowo stosowanymi czcionkami na stronie internetowej są: Tahoma, Verdana, Halvetica, Arial, sans-serif.

 

Jakie mamy możliwości?

Obecnie możliwości jest parę, a po ujrzeniu światła dziennego przez HTML5 jest ich więcej. Wymienię je teraz a poniżej opiszę. Sposoby na różne czcionki:

• sIFR (Scalable Inman Flash Replacement)
• cufón
• @font-face
• Google webfonts

Decyzja odnośnie użycia odpowiedniego sposobu, zależy od potrzeb i sensowności jej użycia. Czasem nie będzie takiej konieczności dlatego decyzję należy dobrze przemyśleć. Ze swojej strony nie polecam używania czcionki w contencie strony, jest nim tekst, który teraz czytasz. Sensownym  i dobrym rozwiązaniem jest użycie niestandardowej czcionki w tytułach czy nagłówkach.

 

Poznajmy się lepiej

Scalable Inman Flash Replacement (sIFR)

Używa JavaScript i Adobe Flash do dynamicznej implementacji czcionki na stronie internetowej, umożliwiając wymianę elementów tekstowych stron HTML  na odpowiednikami Flash. Sposób ten powstał, gdy CSS i przeglądarki internetowe nie wspierały dynamicznego inkludowania czcionek sieciowych. W momencie, gdy powstał HTML wygląd czcionki był kontrolowany wyłącznie przez ustawienia, każdej przeglądarki internetowej.

Użycie czcionki niestandardowej wiązała się z niebezpieczeństwem niepoprawnego jej wyświetlenia ponieważ użytkownik mógł nie mieć jej zainstalowanej w swoim systemie operacyjnym. Oprócz tego technika ta niesie ze sobą pewne, niedogodności. Mimo tego, że dostępność stron internetowych może być zachowana, twórcy powinni być świadomi, że sIFR wpływa na czas ładowania strony ponieważ wymaga on Flasha, JavaScript i CSS’s, których używa.

Dodatkowym minusem jest możliwość blokowania przez blokery reklam (ad blocker) np. popularny AdBlockPlus. Nigdy nie spotkałem się, aby tak się działo.

Cufón

Konwertuje ścieżki czcionek do grafiki wektorowej zapisanych w formacie JSON , a następnie renderuje czcionki do elementów canvas lub VML (w zależności od dostępności) przy użyciu JavaScript. Istotną niedogodnością w stosowaniu cufón jest wymóg aby licencja osadzonej czcionki zezwala na dystrybucję. Licencje wielu komercyjnych czcionek wyraźnie tego zabrania.

Aby móc skorzystać z możliwości cufón’a, należy wygenerować czcionkę. Służy do tego generator czcionek cufón. Po dokonaniu konwersji otrzymujemy kod JavaScript zawierający informacje o czcionce, jak znacznik cufón ma go odczytać. Aby powstały kod zaimplementować poprawnie na stronie należy w kodzie strony, umieścić wygenerowany skrypt oraz skrypt cufón.

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Sin_City_400.font.js"></script>

Plik cufon-yui.js można pobrać z tej samej strony, na której generujemy skrypt czcionki. Aby czcionki wyświetlały się na stronie i były generowane przez kod używamy selektorów.

<cufon>
<canvas></canvas>
<cufontext></cufontext>
</cufon>

Z powodu jego generowania przez JavaScript nie powinno się go stosować dla każdego elementu języka na stronie może to pożerać duże zasoby serwera. Nagłówki czy też menu będą wystarczające. Gdy zdecydujemy się na jeden element, aby skrócić pracę w sekcji head strony umieszczamy następujący kod.

<script type="text/javascript"> Cufon.replace('h1'); // Działa bez selektorów</script>

Po dodaniu powyższego kodu, wszystkie nagłówki h1 będą zamienione przez skrypt na cufón.

Zaletą tego rozwiązania jest precyzyjniejsze, ostrzejsze renderowanie czcionki. Natomiast mankamentem jest używanie JavaScript’a, ponieważ użytkownik może go wyłączyć w przeglądarce, a wtedy cufón nie wyświetli się. Dlatego nie wolno zapomnieć o użyciu styli CSS dla elementu generowanego przez skrypt.

@font-face

Według mnie najbardziej przyszłościowy kierunek stosowania niestandardowych czcionek. Obie powyżej wymienione metody mają swoje minusy i niedociągnięcia. W przypadku @font-face największym minusem jest brak wsparcia przez wszystkie przeglądarki oraz wczytywanie czcionki przy każdym odświeżeniu strony. A dokładniej rzecz ujmując @font-face może używać 4 rozszerzeń czcionek:

• Embedded OpenType (.eot)
• Web Open Font Format (.woff)
• TrueType (.ttf) i OpenType (.otf)
• Scalable Vector Graphics (.svg)

Nie każdy format wspierany jest przez każda przeglądarkę. Jednak jest sposób aby zaradzić temu problemowi, a czcionka będzie się wyświetlała nawet w IE6.

Pierwszym krokiem oprócz wybrania czcionki jest wygenerowanie odpowiednich plików na stronie http://www.fontsquirrel.com/fontface/generator. Pliki ściągamy na dysk i pierwsza część za nami. Należy pamiętać, że nie wszystkie czcionki można użyć w ten sposób. Dlatego bezwzględnie przestrzegajcie licencji na dana czcionkę. Aby czcionka wyświetliła się na stronie w pliku CSS należny umieścić poniższy kod. W CSS możeszy używać font-weight oraz font-style. Tak sformatowany plik CSS mówi, że czcionką znajdującą się w znaczniku <body> będzie GraublauWeb.

@font-face{
font-family: 'GraublauWeb';
src: url('Twoja-sciezka-do-pliku/GraublauWeb.eot');
src: url('Twoja-sciezka-do-pliku/GraublauWeb.eot?#iefix') format('embedded-opentype'),
url('Twoja-sciezka-do-pliku/GraublauWeb.woff') format('woff'),
url('Twoja-sciezka-do-pliku/GraublauWeb.ttf') format('truetype'),
url('Twoja-sciezka-do-pliku/GraublauWeb.svg#GraublauWeb') format('svg'); font-weight: normal; font-style: normal; }

body{font-family: 'GraublauWeb', Helvetica, Verdana, Sans-Serif;}

Niewolno jednak zapomnieć o dodaniu innych czcionek dla bezpieczeństwa, tak jak w powyższym przykładzie. Aby sprawdzić kompatybilność poszczególnych formatów z przeglądarkami zaglądnij na stronę @font-face browser support.

Aby zaradzić problemowi związanemu z wczytywaniem czcionki, można ja cachować za pomocą pliku .htaccess

<FilesMatch
".(eot|woff|ttf|svg)$"> Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
</FilesMatch>

 

Google webfonts

Czym jest Google webfonts? To kolejny udany projekt giganta z Mountain View. Całe „narzędzie” dostarcza wysokiej jakości czcionek, których można używać na swoich stronach. Są darmowe i nieobarczone żadnymi licencjami więc można ich używać również w komercyjnych projektach.

Ilość czcionek dostępnych w bazie to 400, a część z nich obsługuje polskie znaki. Aby to sprawdzić trzeba wpisać własny tekst, najlepiej same polskie litery aby zobaczyć, która czcionka obsługuje ogonki. Tekst wpisujemy w pole Preview Text w zakładce Sentence.

Aby użyć bazy czcionek Google odwiedzamy stronę google.com/webfonts wybieramy interesująca nasz czcionkę oraz w kodzie strony i pliku CSS umieszczamy następujące linie.

W sekcji head strony

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Orbitron:700" />

A następnie wybraną przez nas czcionkę zdefiniować dla wybranych tagów HTML. W praktyce, na podstawie wybranej przeze mnie czcionki „Orbitron”, wygląda to następująco:

h2 {
font-family: 'Orbitron', sans-serif;
}

Nie wolno zapominać o dodaniu innych fontów dla bezpieczeństwa.

W kwestii związanej z polskim znakami rzecz ma się nieco problematycznie, ponieważ nie wszystkie czcionki je obsługują. Jedyna receptą na ogonki to testowanie. Aby jednak ułatwić Wam zadanie podaję spis czcionek od Googl’a z polskimi znakami. Znajdziesz je tu, tu i tu.

 

Który sposób optymalny?

Obecnie najczęściej spotykaną formą użycia niestandardowych czcionek na stronie internetowej jest cufón. Wynika to z faktu znajomości tego selektora, reszta metod jest po prostu mniej znana. Odpowiadając na pytanie, który sposób jest optymalny, odpowiem plik CSS. Mimo tego, że nie będziesz mógł użyć czcionki niestandardowej jest on po prostu najbezpieczniejszy.

Natomiast z powyższych możliwości wskażę Google webfonts, ponieważ mam 100% pewność, że czcionka jest darmowa i można jej użyc do każdego rodzaju projektu.

 

Nie zapominaj

Jednak nie można zapominać o typografii, dlatego jeżeli zdecydujesz się na wykorzystanie opisanych metod pamiętaj, aby z nimi zbytnio nie szaleć. Wynika to właśnie z typografii na stronie internetowej. Drugi aspektem jest odbiór strony i łatwość czytanego tekstu. Gdy zastosujesz dużą ilość różnych czcionek znacznie obniżysz czytelność co wpłynie na odbiór, a ostatecznie na zadowolenie internauty. Z technicznego punktu widzenia możesz znacznie obniżyć szybkość wczytywania strony. A wszyscy wiemy, że po 8s wczytywania internauta opuści stronę. Dlatego proponuję używać czcionek w dużej ilości, wyłącznie w celach edukacyjnych.