Schöne Schriften mit Google-Webfonts

Überschriften und ähnliches sollten immer mit richtigen Schriften und nicht mit Grafiken gestaltet werden da Suchmaschinen sie nur so Indexieren können.
Was ist aber wenn Überschriften mit einer richtig schönen Schrift glänzen sollen die bei weitem nicht jeder Besucher der Website auf seinem Computer installiert hat?
Da hilft Google Webfonts.

Mit Google Webfonts zu Arbeiten ist wirklich Kindereinfach:

Man muss einfach in der linken Suchleiste nach einer Schrift suchen oder eine der Vorgeschlagenen aussuchen und auf den „Quickuse“-Button direkt darunter Klicken.
Auf der folgenden Seite kann man noch verschiedene Einstellungen vornehmen und bekommt auf der gleichen Seite etwas weiter unten einen HTML-Code Schnipsel ausgespuckt der ungefähr so aussieht:

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

Man kann das ganze auch im eigenen Stylesheet als @import einbinden:

@import url(http://fonts.googleapis.com/css?family=Skranji);

oder als javascript:

<script type="text/javascript">
   WebFontConfig = {
     google: { families: [ 'Skranji::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>

Egal welche der Varianten man verwendet die Schrift kann am Ende immer ganz normal verwendet werden als wäre es eine ganz normale Schrift:

font-family: 'Skranji', cursive;

So kann man auch außergewöhnliche Schriften ohne Kompatibilitätsprobleme auf seiner Website/seinem Blog verwenden und es ergeben sich völlig neue möglichkeiten für den Webdesigner ;).

Kommentar verfassen