Bei meinen Web-Projekten greife ich gerne und oft auf Google Web Fonts zurück. Mittlerweile stehen mehr als 550 Schriften im Verzeichnis zur Verfügung. Und es werden immer mehr.

Um das Prinzip dahinter kurz zu erklären: die Schriftdateien für die Google Web Fonts liegen auf einem Google-Server. Wenn nun ein Besucher eine Webseite mit integrierten Google Web Fonts lädt, wird automatisch im Hintergrund die entsprechende Schriftdatei vom Google Server geladen. Das macht Google Webfonts unabhängig von Betriebssystem oder Browser.

Ich stelle euch in diesem Artikel meine Lieblings-Fonts vor und zeige, wie ihr diese in eure Webseite einbindet.

Meine Lieblingsfonts

Bei mir dominieren Sans-Serif-Fonts. Meine aktueller Favorit, welche ich derzeit auch auf meiner Webseite einsetze, ist PT Sans

Ebenfalls als Standardschriftart sehr gut geeignet finde ich folgende Schriftarten:

Open Sans

Source Sans Pro

Droid Sans

Ubuntu

Für Überschriften finde ich perfekt:

Bree Serif

Open Sans Condensed (bold)

Schaut euch einfach mal im Webfonts-Verzeichnis um. Ihr könnt dort nach allen möglichen Optionen filtern und suchen.

Hier noch zwei ausgefallene auffallende Schriftarten:

VT323

Codystar

Okay, für normalen Webseitentext sind diese wohl eher weniger geeignet, aber für große plaktative Überschriften sicher ein Hingucker.

Einbinden in die Webseite

Die Einbindung ist denkbar einfach. Es stehen drei Möglichkeiten zur Verfügung, die auf der Google Web Fonts-Seite erklärt sind. Wenn ihr eure Schriftart gefunden habt, klickt auf den Button „Quick-use“.

Im ersten Schritt wählt ihr nun den Style, also ob die Schriftart normal, fett und/oder kursiv eingebunden werden soll. Je mehr Styles gewählt sind, desto größer wird natürlich auch die Schriftartdatei, die von euren Besuchern im Hintergrund geladen werden muss.

In Schritt zwei könnt ihr weitere Zeichensätze (kyrillisch, griechisch etc.) wählen, wer es benötigt. Auch hier erhöht sich natürlich die Größe, je mehr Zeichensätze gewählt sind.

Nun habt ihr die Wahl, wie ihr die Schriftart einbinden wollt. Es besteht die Möglichkeit den Web Fonts über die Kopfzeile einzubinden (<link>), per @import als Style-Deklaration oder im Stylesheet oder aber per Javascript. Ich persönlich favorisiere die Integration im Stylesheet.

Als letzten Schritt muss die Schriftart noch beim betreffenden CSS-Element eingetragen werden, hier am Beispiel einer Überschrift (h1):

h1 {
font-family: ‘Metrophobic’, Arial, serif;
font-weight: 400;
}

That’s all.

Und was sind eure Lieblings-Schriftarten? Oder schwört ihr auf andere Methoden, wie @font-face, Typekit oder ähnliches?