Home is where the heart is..

Välkommen till bloggen om design, webbutveckling och annat nyttigt!
Med erfarenhet i skorna delar vi gärna med oss av det vi kan.

Webbyrå med erfarenhet i skorna
21
Maj

Google Font Directory är här!

Postades i kategori Kodning, Nyheter, Webbdesign av Victor Reyes

Säg hej då till cufón och sIFR, Google Font Directory är här.
Den 19 maj kom Google ut med en beta version av deras nya API som kommer att underlätta webbproduktionen för kodare och formgivare runt om i världen. Nu kan man alltså länka in och implementera ovanliga och exklusiva typsnitt direkt från Googles servrar in på din hemsida. Enkelt och superkul!

Google Font Directory
Google Font Directory

Varför?

Som dem flesta kanske vet så är listan på webbsäkra typsnitt väldigt kort, vilket begränsar utseendet och typografin på hemsidor otroligt mycket. Webbsäkra typsnitt är dem vanligaste typsnitten som nästa alla datorer har. Använder man ett exklusivt, eget typsnitt så kommer det att synas på dem datorer som har det typsnittet installerat. Så klart går det att göra rubriker till bilder men då är de inte läsbara av Googles spindlar. Cufón och sIFR kom fram med egna lösningar för ett bra tag sen där bl a sIFR använder sig av JavaScript och Flash för att kunna visa egna typsnitt och göra dem läsbara för sökmotorerna.

Regelbunden tillväxt

Google Font Directory är alltså en beta, som så länge innehåller mindre är 20 typsnitt. Otroligt nog fungerar den även i IE6. Nu väntar vi ivrigt på en hastig tillväxt i font-biblioteket och (förhoppningsvis) möjlighet att ladda upp egna typsnitt.

Så bäddar du in typsnitten

Att bädda in typsnittet på en hemsida är mycket enklare än man tror. Det räcker med att länka in en CSS-fil i början av din (X)HTML från Googles servrar och därefter bestämma font-family i hemsidans egna CSS-fil:

HTML




Och så ser det nya ”lobster” typsnittet ut! Trevligt!!



Alla koder till respektive typsnitt får du direkt på Google Font Directory sidan.

CSS


h1{
font-family: 'Lobster', serif;
font-size: 48px;
color:#000;
}

Klart!

Och så ser det nya ”lobster” typsnittet ut! Trevligt!

Snygg sökmotoroptimering

Observera att ovanstående text går att markera, vilket innebär att den är läsbar av Googles spindlar, vilket gör din hemsida både snygg och sökmotoroptimerad.
Klicka på länken för dokumentationen och Googles egna live-exempel.

Victor Reyes Victor Reyes
Designer & Webbutvecklare, född på Kuba, uppvuxen i Ryssland. Specialicerar sig på Wordpress och Front-end utveckling. Driver Creative Workshop webbyrå sen Juni 2009.