Jak zapewne wiecie w Labsach Googla rozwija się coraz więcej projektów. Jednym z najnowszych na który chciałbym zwrócić waszą uwagę jest Google Fonts API. Jak na porządne API Googla przystało, cechuje się ono zdumiewającą prostotą użycia, co sprawia, ze wykorzystanie niestandardowych czcionek na stronie zajmuje dosłownie sekundy.
Użycie
Aby zintegrować daną czcionkę z szablonem wystarczy wstawić na stronie link do czcionki, a następnie można się już do niej odwołać za pomocą font-family. I to tyle:
-
<head>
-
<meta charset="utf-8">
-
<title>untitled</title>
-
<link href='http://fonts.googleapis.com/css?family=Molengo'
-
rel='stylesheet' type='text/css'>
-
<style>
-
body { font-family: 'Molengo', serif; font-size: 100px; }
-
</style>
-
</head>
-
<body>
-
-
</body>
Opcje
Dodatkowo mamy kilka możliwości modyfikacji linka, którym zaciągamy czcionkę. Np możemy pobrać kilka czcionek na raz i odpowiednio po nazwie się do nich odwoływać. Link wyglądałby następująco:
-
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Ponadto mamy również wpływ na formatowanie czcionki, tzn. możemy je załadować z opcjami: bold, italic i bolditalic. Link wyglądałby następująco:
-
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
Zestawienie wszystkich dostępnych czcionek i ich krojów możecie znaleźć na stronie:
http://code.google.com/webfonts
Strona jest bardzo przejrzyście i funkcjonalnie zrobiona, pozwala zapoznać się z przykładami krojów czcionek, można zobaczyć dostępne znaki, jak również prezentuje kawałki kodu które należy wkleić na stronie by móc z danej czcionki skorzystać.
I wszystko by było wręcz idealnie gdyby tylko były polskie czcionki… miejmy nadzieję, że w miarę rozrastania się projektu będą dochodzić coraz lepsze czcionki z coraz większymi zestawami znaków.
Z dnia na dzień przybywa coraz więcej czcionek i tak! także polskich!
(wielkie dzięki dla czujnych czytelników)




9 komentarze do “Szybkie triki: podmiana czcionki za pomocą Google Fonts API”
naprawdę ciekawe API
, szkoda tylko, ze nie działa pod Operą :/
no to prawda, nie działa, ale tylko pod starszą wersją. poza tym po FF chwilę to zajmuje żeby standardowa czcionka została podmieniona na załadowaną z API, więc widać przeskok :] za to zdumiewająco dobrze działa pod IE
Interesujące
chociaż faktycznie brak polskich znaków jest delikatnie rzecz ujmując irytujący, zwłaszcza dla osób dbających o eleganckie posługiwanie się językiem. Nic tak nie denerwuje jak brak polskich znaków
Ile już sposobów na podmianę czcionek powstało. Nadal pozostaje tylko jeden i ten sam problem – czcionki z polskimi znakami diakrytycznymi.
widać, że Google się stara i już niektóre czcionki są dostępne w wersji polskiej – polecam sprawdzić:
http://code.google.com/webfonts/preview
@Alchemy: Jak duży przeskok (procentowo) odnotowałeś po korzystaniu z tego API w odniesieniu do wykorzystywania standardowych czcionek?
Nie jestem Ci w stanie podać procentowych wartości, ale przeskok jest zauważalny, a jednocześnie zdecydowanie krótszy niż w przypadku wykorzystywania pluginów typu Cufón. Inną wadą do niedawna było różne zachowanie i renderowanie czcionek w różnych przeglądarkach, jednakże ostatnio Google wprowadził WebFont Loader sprawiający ze wszystkie przeglądarki podmieniają tekst tak samo jak FireFox.
Właściwie czym to się różni od @font-face?
a kto powiedział, że się różni?
Google Fonts API wykorzystuje @font-face do zagnieżdżania czcionek.