Fonty w internetach – cz. 1

Już od dłuższego czasu zajmuję się stylowaniem stron internetowych, a nic tak nie zmienia odczucia odbioru strony jak naprawdę dobrze dobrana czcionka. To na niej użytkownik skupia wzrok przez większość czasu czytania witryny, w końcu przecież interesuje go treść.

Przeszedłem kilka batalii z definiowaniem czcionek na własnym serwerze. Po krótce, jest opcja w CSS3, która pozwala nam definiować własne czcionki:

@font-face {
     font-family: mojaCzcionka;
     src: url(ścieżka/do/czcionki.ttf);
 }

problem niestety pojawia się, gdy dowiemy się że:

  1. Różne przeglądarki używają różnych formatów, gdzie najpopularniejsze są TrueType Fonty (.ttf), ale np słynny internet explorer którego z przymusu musimy wspierać, używa Embedded OpenType (.eot).
  2. Różne systemy operacyjne (Windowsy, Debiany, MacOSy) mają swoje własne sposoby na interpretację czcionek… Co powoduje że Firefox pod Windowsem i Firefox pod Debianem mogą zupełnie inaczej renderować stronę. Jest to o tyle ważne, że w moim przypadku Windows dorzucał extra 30px pod każdym znakiem pustej przestrzeni nie do obejścia, przynajmniej nie prostym sposobem w CSSie. A to tylko dlatego, że jeden znak w zestawie po prostu wychodził te 30px w dół dla ozdoby.
  3. Z 1. i 2. wynika, że musimy konwertować nasze czcionki do innych formatów. Są internetowe generatory, które rzucą nam paczkę gotowych najpopularniejszych formatów wygenerowanych z jednego pliku… ale niszczą one zazwyczaj polskie znaki!
  4. Skoro już hostujemy czcionkę u siebie, musimy liczyć się z tym że przeglądarka użytkownika musi zawsze najpierw pobrać ją z naszego serwera. Nie tylko powoduje to że user musi poczekać (a jak ma wolne łącze – poczekać DŁUGO) na dodatkowe dane, ale także obciąża to nasz serwer. Można to natomiast załatwić używając reverse proxy do cachowania czcionki, są serwisy które robią to za darmo.

Dodatkowo, jeśli chcemy używać czcionek w innej domenie, niż ta którą hostujemy, musimy mu na to pozwolić. W moim przypadku dla nginx’a w pliku /etc/nginx/sites-available/default

...
server {
...
    location ~* \.(eot|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }
...
}
...

Zbierając wszystkie te informacje do kupy, musimy użyć “kuloodpornego” rozwiązania zaproponowanego w artykule

How to Use Cross Browser Web Fonts, Part 1

który wygląda mniej więcej tak:

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

Nie jest najgorzej, ale trzeba liczyć się z wieloma problemami optymalizacyjnymi.

Przy obecnym projekcie, musiałem niestety zrezygnować z własnego hostingu czcionek. Może kiedyś wrócę do takiego rozwiązania z zapałem i o wiele większą ilością wiedzy… Natomiast teraz zadowala mnie googlowy hosting otwartych i darmowych czcionek, który i tak ma potężną bazę. Polecam:

Google Fonts

Dzięki temu całość problemu dla czcionki Great Vibes sprowadza się do linijek:

HTML:
<header>
    ... 
    <link 
      href='http://fonts.googleapis.com/css?family=Great+Vibes&subset=latin,latin-ext' 
      rel='stylesheet' 
      type='text/css'>
    ...
</header>

CSS: 
p {
    font-family: 'Great Vibes', cursive
}