Google Font API – @font-face einfach verwenden

@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:

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

Dann kann man ihn in seiner eigenen CSS problemlos einbinden:

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

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

<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!

Ähnliche Beiträge

CSScomb – Sortieren einer CSS-Datei Die Übernahme von komplexen Seiten dritter ist kein Spaß, aber leider Alltag. In der Regel sieht dieses Szenario bei mir so aus: irgendein Hobby-Frick...
InstaCSS – die Referenz in Sachen CSS3 / HTM... Ich ergehe mich ja nicht oft in Superlativen, aber in Sachen CSS3 / HTML5 Dokumentation besteht mancherorts echt Nachholbedarf. Man bewegt sich dort i...
Initializr – HTML5 Template Generator Nachdem uns derzeit wie blöde Boilerplates um die Ohren geworfen werden stellt sich zu Recht die Frage: welche ist passend für mich, und was mache ich...
Text auf Pfaden mittels CSS3 Brave New World - CSS3 und insbesondere das Canvas-Element machen Dinge möglich, über die man sich früher keine Gedanken machen brauchte. Insbesondere...

7 Antworten auf „Google Font API – @font-face einfach verwenden“

  1. @Elroy:

    Wie kommst du darauf, dass Google kein font-face einsetzt? Hast du dir schonmal anzeigen lassen, was die imports zurückgeben?
    Astreines font-face ist das, scheinbar gefiltert durch Rückschluss auf den Client. Ein UserAgent vom IE6 gibt nämlich, neben der TrueType Schrift, noch eine weitere Quelle an und ich tippe mal, das ist das EOT-Format, welches der Internet Explorer in Verbindung mit font-face schone eine Ewigkeit unterstützt (auch wenn ich es jetzt nicht getestet habe).
    Nur weil etwas erst in CSS3 spezifiziert wird, heißt es ja nicht, dass die Technologie dafür noch nich da sein kann.

    Was man nun von dem proprietären Format halten will, ist nochmal eine andere Frage. Unterstützung gibt es aber auf jeden Fall.

    @Guido

    Dein „Diesen Beitrag zitieren“ JavaScript wirft Fehler :P.

  2. Pingback: Google Web Fonts
  3. Gute Sache, nur was das jetzt mit font-face zu tun hat verstehe ich nicht ganz.
    Font-face wird hier doch gar nicht benutzt, und da font-face CSS3 ist würde es auf IE7, IE8 und einigen anderen Computern gar nicht funktionieren.
    Die Google Methode dagegen funktioniert.

    @Matthias
    Du kannst die Fonts ja auch auf deinen Server laden wenn du dich so von Google verfolgt fühlst, also auch was für dich.

  4. Pingback: Google Web Fonts | TreasureZone

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.