mehr Schriftarten im Web mit Google Font API

Posted on by marcus

Frischer Wind im Web deutet sich derzeit an vielen Stellen an. Google bietet nun mit der Font API eine schnelle und simple Möglichkeit, OpenSource-Schriftarten in Webseiten zu integrieren.

So sieht das komplette HTML-Beispiel aus:
http://www.marcusegger.de/examples/webfont/index.html.

Im Prinzip ruft man das Stylesheet folgendermaßen auf:

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

Die gewünschte Schriftart kanndann ganz normal im CSS verwendet werden:

.cantarellParagraph {
font-family: 'Cantarell', arial, serif;
font-size: 48px;
}

Es besteht auch die Möglichkeit, mehrere Schriftarten auf einmal anzufordern, die Trennung der Font erfolgt dann mit dem Pipe-Symbol:

<link href='http://fonts.googleapis.com/css?family=Cantarell|Lobster' rel='stylesheet' type='text/css'>

Weiter Informationen und Möglichkeiten bitte unter http://code.google.com/intl/de-DE/apis/webfonts/docs/getting_started.html#Quick_Start einsehen, es ist auch möglich, verschiedene Schnitte einer Schrift zu verwenden. Mit dem sogenannten WebFont Loader eine Javascript-Variante zur Verfügung.

Hier das vollständige HTML des Beispiels:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Font API Test</title>
<link href='http://fonts.googleapis.com/css?family=Cantarell|Lobster' rel='stylesheet' type='text/css'>
<style type="text/css">
.cantarellParagraph {
font-family: 'Cantarell', arial, serif;
font-size: 48px;
}
.lobsterParagraph {
font-family: 'Lobster', arial, serif;
font-size: 26px;
}
</style>
</head>
<body>
<p class="cantarellParagraph">Making the Web Beautiful!</p>
<p class="lobsterParagraph">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben</p>
</body>
</html>

Schreibe einen Kommentar