Google Web Fonts - új kinézet, 291 font, gyűjtemények

Nem is olyan rég újdonságnak számított a Google Font Directory / Google Font API, ami a CSS3 szabványban meglévő egyedi betűtípusok gyors, könnyű beágyazását teszi lehetővé flash, canvas / kép generálás nélkül, ráadásul nem utolsósorban böngészőfüggetlen megoldást is jelent.

Természetesen nem a Google az eslső, aki webes "betűtípus-könyvtárat" tett elérhetővé, hiszen a TypeKit is szép kis nevet szerzett már magának, de az pl. fizetős - illetve ingyenes TypeKit fiókkal ha jól emlékszem 1 betűtípust ingyen is felhasználhatunk egy adott domainhez, de más szolgáltatók - pl. wordpress.com is lehetővé teszik a használatát - de ott van még ingyenes alternatívaként a Kernest.com vagy a FontSquirrel is, de ezekről majd máskor..

Eleinte talán úgy 30-40 betűtípus lehetett a Google Font Directory készletében, ez a szám azonban folyamatosan nőtt, ma már 291 font közül választhatunk, melyek között igaz, még mindig sok olyat találni, ami nem tartalmaz bizonyos számunkra elengedhetetlen karaktereket, pl.: ő, ü, ű - de azért akad szép számmal olyan font is, ami már igen.

Természetesen a betűtípusok beágyazását egy egyszerű webalkalmazás segíti, (korábban az alkalmazni kívánt font egyes css tulajdonságait is beállíthattuk, mint letter-spacing, line-height stb.) ahol megkapjuk a kívánt betűkészlethez tartozó kódot, amit elhelyezünk oldalunk szekciójában - ráadásul még választhatunk is a következő módszerek közül (Supermercado Google Web Font):

css standard:

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

@import:

 @import url(http://fonts.googleapis.com/css?family=Supermercado+One);

javascript:

<script type="text/javascript">

WebFontConfig = {

google: { families: [ 'Supermercado+One::latin' ] }

};

(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>

Kiválaszthatjó még (már ha komplett betűtípus-családról beszélünk) a normal, bold, italic verzió, és egy grafikonnal adja tudtunkra a google a font betöltődési idejét is, és javasolja, hogy csak a nekünk szükséges font stílust pipáljunk be elkerülve ezzel a többi felesleges betöltődését.

Újdonságnak számít, hogy az egyes betűtípusokat gyűjteményekhez adhatjuk (Add "Supermercado One" to your collection), ezeket aztán le is tölthetjük, így akár saját szerverünkön is tárolhatjuk a fontokat.

Nemrég valaki a font letöltésben tovább ment, és lehetővé teszi nekünk az összes, Google Font Directory-ban lévő betűtípus letöltését / download google fonts: http://joemaller.com/1856/download-google-fonts/

Google Web Fonts