Jakiś czas temu w serwisie develway.pl pojawił się link do bloga Six Revisions, na którym przedstawiono opis nowego API Google. Tym razem firma ta wzięła się za typografię w sieci i wypuściła Font API.
Google Font API jest sposobem na uzyskanie na stronie “ładnych” czcionek bez konieczności uciekania do tanich sztuczek w postaci obrazków lub plików swf. Firma Google dostarcza galerię czcionek, z których możemy skorzystać oraz kod, który musimy dodać do naszej strony.
Jak to działa?
Zasada działania Google Font API jest bardzo prosta. Wystarczy, że do naszej strony dodamy kod
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
Gdzie Font+Name jest nazwą czcionki z galerii. Od razu zaznaczę ważną rzecz. Wszystkie spacje muszą zostać zamienione na znak plusa (+). Jeśli chcemy wykorzystać więcej czcionek na naszej stronie, wystarczy, że oddzielimy je pionową kreską – |
Następnie stosujemy standardowy kod CSS, który wykorzystuje nową czcionkę. Należy pamiętać o dodaniu czcionki “zapasowej”, która zostanie użyta w przypadku problemów z wykorzystaniem niestandardowej czcionki.
<style>
p {
font-family: 'Font Name', serif;
font-size: 48px;
}
</style>
A tak to działa (i wygląda) w praktyce (tekst można zaznaczyć i skopiować):
Hello World!
Jeśli z jakiegoś powodu napis nie wygląda “ładnie”, oto zrzut ekranu
Oprócz samej czcionki można użyć wagi i/lub kursywy. Robi się to poprzez dodanie odpowiedniego parametru, wstawianego po dwukropku (:) po nazwie czcionki. Dostępne parametry to:
- italic lub i – kursywa
- bold lub b – pogrubienie
- bolditalc lub bi – pogrubiona kursywa
Nie tylko style
Oprócz znacznika style, mamy możliwość skorzystania z kodu Javascript do załadowania niestandardowej czcionki. Przewagą tego rozwiązania jest to, że mamy możliwość dodania funkcji zwrotnych, wywoływanych w odpowiednich momentach ładowania czcionki/czcionek.
Z Javascript można skorzystać na dwa różne sposoby. Bezpośrednio ze skryptu webfont.js lub przy pomocy Google Ajax API. Jeśli nie korzystamy na naszej stronie z Ajax API, Google zaleca stosowanie pierwszej metody, ponieważ jest szybsza.
W przypadku korzystania z Javascript do ładowania czcionek, mamy również możliwość korzystać z czcionek znajdujących się w serwisie TypeKit.
Co dalej?
Jeśli zainteresował was temat czcionek od Google, polecam lekturę oficjalnej witryny Google Font API. Znajdziecie na niej dokładny opis wszystkich parametrów, przypadki użycia oraz techniczny opis działania tego mechanizmu.
Jeszcze jedna uwaga Google Font API jest w fazie Labs. Miejcie to na uwadze, jeśli będzie chcieli z niego skorzystać.
Jak tylko wprowadzą interesujące czcionki z polskimi znakami to na pewno skorzystam z tego dobrodziejstwa. ;]
Najlepsze w tym wszystkim jest to, że czcionki można ściągać i korzystać z nich we własnych dokumentach oraz to, że czcionki można stosować w komercyjnych projektach. Zanim jednak będę cieszył się Google Font API, poczekam aż będzie co najmniej beta
Bardzo ciekawa sprawa i niezwykłe ułatwienie dla twórców różnego rodzaju witryn
Teraz czekać aż będzie wszystko w fazie "produkcyjnej" 
Ciekawe czy zanim to wejdzie do fazy 'produkcyjnej' nie spopularyzuje się po prostu ściąganie czcionek przez przeglądarkę – to chyba feature css3. Zresztą, graficy w swoich projektach zwykle używają czcionek z 'windowsowego' zestawu, albo jakiś 'kosmicznych' (tak wynika z moich doświadczeń), żeby można było użyć tego API w projekcie dla klienta, trzeba zacząć od edukacji grafików. Oczywiście sam projekt wygląda stabilnie (nawet we wczesnej wersji) i sexi – jak na google przystało – i chyba dobrze – o żadnym z rozwiązań które widziałem nie powiedział bym 'stabilne'.
HTML5 + CSS3 to tandem, który jeszcze długo nie będzie standardem. A to rozwiązanie działa (podobno – nie testowałem) nawet w IE6.
We're sorry, but your browser is not supported by the Google Font API.
To browse the fonts in the Google font directory please switch to a more modern browser.
Tylko z Chrome'a
Właśnie sprawdziłem na IE6 i galeria działa bez problemu. Na jakiej przeglądarce pojawił się ten błąd?
ciekawe rozwiązanie… do czasu wersji beta lub wersji z czcionkami polskimi polecam Cufon'a.
Niestety nie dziala na mobilnym androidzie
pokazujezwykly tekst
~MaciejM
U mnie działa
Sprawdzałem na androidzie 1.5 lub 1.6. Nie było problemu z wyświetleniem niestandardowej czcionki.
@melkor1984: A do prostszych rozwiązań polecam http://typeface.neocracy.org/