+ MENY
2011 jun 3
0

Så använder du Googles webbfonter

Jag letade för några dagar sedan efter bra webbfonter för att köra på ett wordpresstema och tänkte berätta hur detta går till. I mitt fall så använder jag Googles öppna API:er för detta. Så här går det till.

Snygga och fula fonter

google web fonts

Det är mycket enkelt att snygga upp texterna på sajten med webbfonter

På webben så får man på de allra flesta sajter nöja sig med att läsa texter i arial, helvetica, georgia och liknande fonter som det finns stöd för i alla webbläsare. Och det är ju inget fel med det. De är praktiska, lätta att läsa och fungerar i alla lägen utan större kompabilitetsproblem. Men ibland vill man ha något snyggare, mer unikt och anpassat än detta och då passar Googles webbfonter alldeles utmärkt. Dessutom är det hur lätt som helst att använda sig av googles webbfonter.

Så använder du Googles webbfonter

Det enda du behöver göra för att få tillgång till dessa fonter är att lägga till några rader kod i <head> taggen i ditt html dokument. Det man lägger till är bara en länk till ett stylesheet hos googles och vips så har du tillgång till din nya font. Koden ser ut så här:

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

Mer än så behöver du alltså inte göra. Viktigt att tänka på är att där det står ”fontnamn” måste du alltså skriva i den fonten som du vill kunna använda  på din webbsida. Det går också att skriva i flera genom att lägga till ett +nyttfontnamn efter.

Sedan anropar man fonten som vanligt i stilmallen (.css) genom tex:

#my-perfect-font {
font-family: 'Fontnamn', arial, serif;
}

Resurser och länkar för webbfonter

Du som använder wordpress har förstås lite extra fördelar genom alla plugin i som finns. För just detta så kan du installera WP Google Fonts som automatiskt ger dig tillgång till alla dessa fonter. Om du har, som jag, lite svårt att välja rekommenderas att ta sig en titt på Fontgalleriet.

Läs också:

Comment