Google Webfonts einbinden und nutzen

google-web-fonts-logo

Heute wurde ich mal wieder auf ein Thema angesprochen, was ich nun zum Anlass nehme um kurz etwas darüber zu schreiben. Bei einem Gespräch zum Thema Webprogrammierung kam die Frage auf, welche Schriften sich am besten eignen. Am besten eignet sich die umfangreiche Sammlung von Google. Die Rede ist von Google Webfonts.

Was sind denn Google Webfonts?

Google hat im Jahr 2010 (glaube ich) angefangen ein paar Schriften über  die eigenen Server verfügbar zu machen. Seit dem wächst die Online Bibliothek von Tag zu Tag und dürfte heute zu der größten frei verfügbaren Schriftbibliothek gehören. Erreichbar sind die Schriften über die Adresse: http://www.google.com/webfonts

Warum Google Webfonts nutzen?

Früher nutzen viele Webdesigner die langweiligen Schriften Arial oder Helvetica, da diese auf den meisten Rechnern installiert gewesen sind. Nutze man eine andere Schrift so konnte es passieren, dass die Webseite nicht in jedem Browser gleich ausgesehen hatte. Es gab zwar immer einen Fallback auf Arial, doch schön war es nicht. Google Webfonts sind für alle Browser erreichbar und ermöglichen deutlich mehr Freiheiten und Kreativität beim Entwickeln von Webseiten.

Wie man Google Webfonts nutzten kann?

Auch das Einbinden ist ein wahres Vergnügen. Hat man sich bei Google eine Schrift ausgesucht, so findet man dort auch 3 Möglichkeiten die Schrift im eigenen Projekt zu verwenden.

Möglichkeit 1 (Metatag):

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

Möglichkeit 2 (CSS Import):

1
@import url(http://fonts.googleapis.com/css?family=Denk+One);

Möglichkeit 3 (Javascript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">// <![CDATA[
WebFontConfig = {
    google: { families: [ 'Denk+One::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
// ]]></script>

Google zeigt auf folgender Seite auch reichlich Beispiele zum Eindinden der Webfonts. Ein Besuch lohnt sich auf jeden Fall: https://developers.google.com/webfonts/docs/getting_started?hl=de

Fazit:

Wer selbst Webseiten oder Webanwendungen entwickeln möchte kommt kaum noch an Google Webfonts vorbei. Google Webfonts sorgen für einheitliches Aussehen auf allen gängigen Plattformen und den unterschiedlichsten Browsern.

 

34 Kommentare » Schreibe einen Kommentar

  1. Ich hab schon mal die Erfahrung gemacht, dass Schriften von einem Mac nicht auf Windows PSs funktionieren und umgekehrt. Wie ist denn das bei den Google Fonts, funktionieren die auf allen Plattformen ? Auch auf Mobilgeräten – ipad etc ?

    Grüße
    Jörg

    • Hast du den Beitrag komplett gelesen? Im Fazit schreibe ich, dass die Webfonts auf allen gängigen Plattformen und mit allen aktuellen Browsern einwandfrei funktionieren. Dazu gehören auch mobile Endgeräte wie das iPad.

      LG Stefan

      • Ja das hatte ich gelesen, ich hab nur selber mal eine Indesign Datei bekommen – auf dem Mac erstellt – mit eingebundenen Schriften, damit konnte ich auf dem PC nichts anfangen. Da ich keinen Mac zum ausprobieren hab, wollte ich nur sichergehen, das die Googlefonts auch wirklich überall funktionieren.
        Grüße
        Jörg

  2. Hey,
    also ich bin sehr zufrieden mit den Google WebFonts, vor allem mit der Zuverlässigkeit in der Darstellung, allerdings sind nur wenige wirklich brauchbar!
    übrigens gefällt mir das Design von deinem Blog ziemlich gut (@Stefan)

    Grüße, Jürgen

  3. Hallo Stefan,

    vielen Dank für diesen Beitrag. Dieses Thema ist leider an mir vorbeigegangen, obwohl ich mich im letzten Jahr um den Website-Relaunch unseres Portal gekümmert habe. Unser Webdesigner hat dabei eine eigene Schriftart entwickelt, welche bei Laden der Seite angezeigt wird. Eingebunden ist diese im CSS glaube ich. Ich werde Ihn darauf ansprechen, ob es möglich ist, die Google WebFonts als “Fallback” einbinden kann, denn aktuell ist es auch bei uns nur Arial :-S

    VG aus Berlin

  4. Hi, ich wollte mich auch demnächst einmal ein bischen näher mit dem Thema Webdesign auseinander setzen und da kommt mir dieser Beitrag über Webfonts gerade richtig…
    Möchte mich in dem Zusammenhang auch an Jürgens Meinung anschließen, mir gefällt das Design von diesem Blog auch sehr gut :)
    Gruß
    Micha

  5. Schöner Artikel! Ich arbeite auch mit Google Webfonts, da ich die Erfahrung gemacht habe, dass die Schriftarten die ich auf meinem Desktop gesehen habe nicht bei anderen gezeigt wurden. lag bei mir z.B. daran, dass ich die Fonts von Office 2010 installiert hatte und einen Freund von mir nicht. So konnte ich nicht erkennen, dass diese Schriftart meiner Website bei anderen falsch dargestellt wurde.

    Also bin ich auf google Webfonts umgestiegen ;) Kann ich nur empfehlen!

  6. Gerade wenn man schnell seine Webseite mal aufhübschen will, kann man das über die Fonts von Google bequem machen – auch haben die eine gute Übersichtsseite zur Voransicht. Neu war mir in deinem Artikel die Einbindung direkt über das Javascript – müsste man mal bzgl. der Seiten-Performance (Ladezeit) vergleichen

  7. Ich habe mir bis zu deinem Artikel erlich gesagt keine Gadanken darum gemacht. Aber du hast ja schon recht damit. Man sollte sich damit beschäftigen. Ich nutzte in den Letzen Jahren immer nur die Standarts wie Arial und Times new roman.
    Kann mir einer sagen ob es da auch Probleme bei gibt und ob ich die Seiten nun umbasteln muss?

  8. Hallo Steffan – danke für den Beitrag.
    Wir arbeiten im Moment an einem Website-Relaunch und ich suche noch nach Ideen um die Usability zu verbessern.
    Webfonts ist eine gute Idee – werden wir nutzen – insbesonde da sie auch auf allen Endgeräten funktionieren. ( Was immer wichtiger wird )

  9. Gibt es die Google Webfonts denn auch für den Desktop, damit man diese z.B. auch für Dokumente oder gar Flyer nutzen kann?

  10. Die Google Webfonts machen einem, wie Du auch in deinem Artikel geschrieben hast, das Leben bei der Erstellung von Webseiten definitiv leichter. Vielen Dank für die kleine Anleitung!

  11. Also bis heute habe ich von Google Webfonts noch gar nichts gehört. Muss ich gleich mal nach Google Webfonts googeln. Dann werde ich auch schlauer, um welche Schriften es sich handelt. Vielen Dank für solch gute Tipps.

  12. Wie ist eigentlich die Performance inzwischen?
    Habe noch im Hinterkopf dass vor einiger Zeit noch von Googles Webfonts abgeraten wurde deswegen…

  13. Wie sieht es denn mit dem Einbinden vom eigenen Server aus? Also grundsätzlich versuche ich natürlich Hotlinking wo möglich zu vermeiden. Kann ich mir die Dateien also auf den eigenen Webspace kopieren und von dort einbinden oder erlaubt Google das nicht?

  14. Glaube Webfonts von Google nagen ganz schön an der Performance, auch wenn sie sehr ansehnlich sind.

  15. Das die Typographie mittlerweile auch bei den Webdesignern eine Chance hat freut mich als Typograph sehr. Und das es seit 2010 (Ich denke du hast da Recht) dank der Google Webfonts äußerst einfach geworden ist macht die Sache noch viel besser.
    Immer mehr Themedesigner kümmern sich ja jetzt gleich um eine passende, schöne Schrift und werten so ihre Themes deutlich auf.
    Deine Anleitung hilft sicherlich vielen Leuten und sorgt dafür, daß sie es einfach mal mit einer frischen Schrift versuchen.
    Gruß, Max

  16. Das ist ein prima Tool, endlich kann man auf mehr Fonts zurückgreifen und alle Browser kennen Sie :-) @Steve Ich habe bisher kaum Performance Probleme durch die Fonts gemerkt.

  17. Ich kann mich noch daran erinnern, wie Google Webfonts mit ganzen 7 Fonts gestartet ist. Mittlerweile ist es ja ein sehr reicher Fundus an brauchbaren Schriften geworden. Ich setze sie inzwischen auch sehr gerne auf meinen Web-Projekten ein!

  18. Aus Sicht eines Google-Kritikers ist das eher bedenklich. Ich will da aber auch nicht näher drauf eingehen aber nur kurz erwähnen, dass ich zum Beispiel das Firefox/Iceweasel Add-on NoScript einsetze, das die Einbindung externer Schriftarten unterbinden kann. Mein Interesse dahingehend: gibt es im CSS oder JS eine Art Fallback oder Workaround, der erkennen kann, ob der Font auch wirklich geladen und das Layout nicht zerschossen wurde?

  19. Habe bei der Erstellung meiner privaten Homepage auch mit Google Webfonts gearbeitet. War auf jeden Fall eine enorme Arbeitserleichterung. Danke für die gute Anleitung!

  20. Hallo Stefan,

    endlich mal ein Blog der die Informationen kurz und knackig auf den Punkt bringt!

    Danke!

    Gruß
    Holger

  21. habe auch heute zum ersten Mal von den Webfonts gehört, also danke für den Beitrag.Hört sich ja echt klasse an.Da ich noch Anfänger in Sachen Webdesign usw, bin, helfen mir solche Beiträge immer sehr.Beschäftige mich, soweit ich Zeit habe, immer mehr mit der Thematik!

  22. Über kurz oder lang wird man an Google Webfonts nicht mehr vorbei kommen. Die Plattformen werden immer umfangreicher und eine einheitliche Darstellung in allen Browsern wichtig für jeden Webentwickler um keine Besucher von nicht unterstützten Plattformen zu verlieren.

  23. Danke für die Anleitung, hab’s direkt mal gemacht. :)

    Hat doch etwas neues, wenn man selber den Font aussuchen kann und nicht nur die Standard-Varianten.

    Hab das bislang die Jahre vermieden, da ich einfach die Befürchtung hatte, dass es dann bei einigen nicht klappt. Aber so scheint das ja eine solide Nummer.

    Wobei ich mich in der Auswahl schwer tat. Manchmal war nur ein kleiner Haken oder eine Linie von Font zu Font unterschiedlich, hab dafür kein Auge. :D :D

  24. Höre zum ersten Mal von GOOGlE WEBFONTS, hört sich ja nicht schlecht an.Auf jeden Fall ein toller Artikel, mit guter Anleitung, danke!
    Gruß, Georg

  25. Ich nutze die webfonts schon ein bisschen länger für verschiedene Seiten. Ich finde sie super. lassen sich einfach einbauen, funktionieren grds. in allen browsern und sehen einfach klasse aus. Mein Tipp: Muli. LG Sarah

  26. Hi Stefan,

    vielen dank für den guten Beitrag.
    Du hast alles wichtige zusammengefast.
    Besonders für Anfänger ist das super Verständlich.
    Ich nutze selber oft die Fonts von Google, da man mit den Fonts keine Probleme hat.
    Gruß Marc

  27. Ich nutze WebFonts erst, seitdem ich ein Responsive Design Template im Internet gefunden habe und meine Seite darauf umgestellt habe. Gehört hatte ich schon davon, näher betrachtet jedoch nie.
    Allerdings werden diese von Google selbst wegen der Ladezeit in den Webmaster Tools angemeckert. Ab da habe ich dann das Template modifiziert und lade die Schrift per JavaScript asynchron nach anstatt es per Metatag einzubinden.

    Gruß Daniel

Achtung an alle Backlinksammler: Backlinks auf Moneysites werden gnadenlos entfernt.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>