Coole Schriftarten mit Google einbinden

Die meisten von Euch kennen sicher das Problem, man möchte einmal nicht die Standartschriftarten Arial, Verdana oder Times New Roman für eine Website benutzen, doch leider ist man meistens aufgeschmissen, da nur ein winziger Bruchteil der Internetnutzer die benutzte Schriftart installiert hat. Der große Rest der Welt bekommt die Website also im Prinzip ganz anders dargstellt, als vom Entwickler gewünscht wurde. Hier schafft unter anderem das Google Font Directory jetzt kostenlos Abhilfe.

Man sucht sich einfach aus den angebotenen Schriftarten die passende raus und bindet sie auf seiner Website ein. Dies geht ganz einfach auf drei verschieden Wegen:

  • Man bindet die Schriftart im <head> Bereich der Website ein:
    <link href='http://fonts.googleapis.com/css?family=[NameDerAusgesuchtenSchriftart]&subset=latin' rel='stylesheet' type='text/css'>
  • Die Schriftart wird per @import Befehl über den Stylesheet eingeunden. Dazu fügt man folgende Zeile in den Stylesheet ein:
    @import url(http://fonts.googleapis.com/css?family=[NameDerAusgesuchtenSchriftart]&subset=latin);
  • Wenn man jedoch noch etwas mit der neuen Schrift „spielen“ will, bzw. den Ladeprozess der Schriftdatei besser kontrollieren will, benutzt man JavaScript:
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'NameDerAusgesuchtenSchriftart' ] }
  };
  (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>

Bei der Variante der Einbindung per Javascript, sollte man sich mit dem Google WebFont Loader vertraut machen. Wenn man jedoch einfach nur ein paar Texte ersetzen möchte, reicht die Einbindung per Link oder per Stylesheet.

Nach dem dies getan hat, darf man natürlich nicht vergessen, die neue Schriftart im Stylesheet einer Klasse, z.B. h2 für Überschriften, zuzuweisen. Dies macht man ganz einfach mit folgendem Befehl: h2 { font-family: '[NameDerAusgesuchtenSchriftart] ', arial, serif; }

So kann man mit wirklich minimalen Aufwand eine coole Schriftart allen Nutzern, unabhängig von Betriebssystem und Browser zugänglich machen. Jedoch sollte man dabei immer das Wichtigste im Auge behalten – die Lesbarkeit. Eine ausgefallene Schrift im Header oder als Überschrift ist schon eine coole Sache, für den reinen Fließtext eignet sich aber nicht jede Schriftart. Das nur noch als kleiner Tipp am Rande :)

Hinterlasse eine Antwort

Deine Email-Adresse wird niemals veröffentlicht. Pflichtfelder sind mit * gekennzeichnet.