@font-face ist eine ziemlich nette Sache die einem Cufon und schlimmeres erspart, dummerweise ist @font-face allerdings auch mit einigem Aufwand verbunden. Denn zum einen ist es nicht Browser-kompatibel, zum anderen müssen Fonts vor der Verwendung noch aufbereitet werden. Damit man mich nicht falsch versteht: es ist relativ einfach ein @font-face zu verwenden! Allerdings kommt zu der Tatsache das man die Fonts darstellen will natürlich auch noch der Punkt, das man diese erst vom Server laden muss.

Screenshot der Google Font Datenbank

Abhilfe verspricht nun die Google Font API – und zwar in jeglicher Hinsicht! Das höchst sinnvolle Tool stellt nicht nur eine Browserweiche bereit, sondern bietet Fonts auch direkt an. Die Einbindung ist Dabei recht einfach: Zunächst einmal sucht man sich in der Google Font Datenbank einen entsprechenden Font aus. Dieser wird dann per externem CSS direkt von Google eingebunden:

1

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

Dann kann man ihn in seiner eigenen CSS problemlos einbinden:

1

h1 { font-family: 'Cantarell', arial, serif; }

Auch an das leidige Thema mit den Varianten hat Google gedacht:

1

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

Dies ist die simple Methode, allerdings bietet Google auch ein Javascript mit dem Namen Webfont Loader an, das eine verbesserte Kontrolle über das Aussehen der Seite verspricht, da es bereits während des Ladens der Fonts eingreift, damit der damit verbundene Texte nicht ungestyled auf einer Webseite landet.

Einziger Haken an der Sache ist, das man als Designer natürlich den Font erst einmal in Photoshop braucht. Ich habe leider keine direkte Download-Möglichkeit für den Font gefunden. Dies lässt sich aber schnell umgehen indem man die CSS direkt im Browser aufruft bzw. den Quelltext des CSS anschaut. Dort erhält man dann einen Link für den Font als TTF, den man nur noch abspeichern muss:

http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA

Eine angenehme Nebenwirkung des Ganzen ist übrigens das leidige Thema der Lizenzen, weil man in der Regel @font-face zwar einsetzen kann, man aber nie weiß ob man sich mit dem jeweiligen Font auf rechtliches Glatteis begibt! Die Google Fonts sind frei verwendbar!