Google Font API czyli czcionki od Wielkiego Brata



Projektując serwisy internetowe pamiętać należy, że użyte przez na czcionki nie koniecznie muszą znaleźć się pośród czcionek dostępnych u naszych czytelników. Różnice determinuje głównie system operacyjny. W różnych systemach zbiór standardowych fontów jest różny a ich część wspólna raczej mizerna.

Często spotykanym rozwiązaniem jest użycie grafiki zawierającej niestandardowe czcionki. Takie rozwiązanie daje nam pewność, że napis będzie wszędzie wyglądał tak samo. Łatwe, ale nie pozbawione wad. Największą wadą jest SEO - mimo znacznika alt jednak nadal to tylko grafika.

Innym rozwiązaniem jest stosowanie czcionki alternatywnej. Projektant/programista może określić czcionkę która zostanie wyświetlona w przypadku gdy czcionka podstawowa nie będzie dostępna. Wydaje się to wystarczającym kompromisem, jednak jak to w kompromisie ideału nie ma.

Pozostaje trzecia możliwość. Dostarczenie klientowi czcionki, która nas interesuje. Ten sposób wydaję się być idealny i tu wyciąga do nas pomocną dłoń Wielki Brat.
Zupełnie niedawno Google uruchomiło nową usługę Gogole Font Directory. To zbiór czcionek, co ważne, dostępnych na licencji open source. Dostęp do nich umożliwia Google Font API.

Implementacja jest banalna i zgodna z CSS. Wystarczy w nagłówku strony umieścić:

<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

I już możemy używać czcionki Cantarell w naszej stronie. Warianty czcionki, wytłuszczenie, kursywa, wymieniamy po dwukropku:

<link href=' http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>

Banalne, prawda?

Google daje również gotowca do javascriptowego załadowania katalogu wybranych przez nas czcionek:

 

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Tangerine', 'Cantarell' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>



API przygotowane przez google nie zmusza programisty do wysiłku. Właściwie wszystko podane jest jak na tacy. Postanowiłem sprawdzić jak opensource'owe fonty sprawdzą się z ogonkami oraz ile trzeba się napracować aby zintegrować je z serwisem.
Przyszło mi do głowy, że zrobie browser czcionek. Pracy wiele nie było. Kilka linijek w JS oraz dostarczony przez google loader i gotowe.



Zasmuca jednak fakt, że tak fajne narzędzie w polskich warunkach może okazać się kulawe. Mam na myśli nasze ukochane ogonki. O ile niektóre czcionki je posiadają i wyglądają super, np:


to są też takie, które ogonków nie posiadają i zepsują nam porządany efekt.




Pozostaje mieć nadzieję, że to tylko trudne początki i wkrótce komplet ogonków pojawi się w całym katalogu.
 



Proszę czekać...
Nie możesz komentować. Bartosz Stasiurka umieścił Cię na czarnej liście lub Twoje konto nie jest aktywne.