Tipps

Google Web Fonts

Google Web Fonts einfach in WordPress einbinden

In der Vergangenheit war das Internet durch die Langeweile einer Handvoll Schrifttypen geprägt. Denn wollte man sichergehen, dass jeder Besucher einer Website eine leserliche Schrift vorfand, musste der kleinste gemeinsame Schrifttypen-Nenner über alle Betriebssysteme hinweg eingehalten werden.

Worum geht es?

Diese Zeiten sind längst vorbei, weil mittlerweile viele Schriftbibliotheken im Internet zur Verfügung stehen, die man im eigenen Webauftritt einbinden kann. Hier lesen Sie, wie auch Sie Ihre Besucher mit einem individuellen Schriftbild auf Ihrer Website überraschen können.

Was ist Google Web Fonts?

Unter den vielen Anbietern sorgt auch Google mit seinem Angebot Google Web Fonts (nicht ganz uneigennützig) für ein schöneres Internet. Und das in der gewohnt hohen Qualität! Zum aktuellen Zeitpunkt (August 2012) sind es nicht nur schon knapp über 500 Schriften, aus denen man auswählen kann. Aber auch die Server, auf denen die Fonts bereitgestellt werden, reagieren sehr verlässlich und außerordentlich schnell. Und die Schrifttypen sehen in den verschiedenen Webbrowsern weitestgehend identisch aus.
Lange Jahre war das Internet von der Langeweile einer Handvoll Schrifttypen geprägt. Denn wollte man sicher gehen, dass jeder Besucher der Website eine leserliche Seite vorfand, musste der kleinste gemeinsame Nenner über alle Betriebssysteme hinweg eingehalten werden. Diese Zeiten sind längst vorbei, weil es mittlerweile Angebote im Internet gibt, die Schriftbibliotheken zur Verfügung stellen, die man in den eigenen Webauftritt einbinden kann.
Auch Google sorgt durch sein Angebot Google Web Fonts nicht ganz uneigennützig für ein schöneres Internet. Und das in der gewohnt hohen Qualität! Zum aktuellen Zeitpunkt (August 2012) sind es nicht nur schon knapp über 500 Schriften aus denen man auswählen kann, die Server auf denen die Fonts bereitgestellt werden, reagieren sehr verlässlich und außerordentlich schnell. Und die Schrifttypen sehen in den verschiedenen Webbrowsern weitestgehend identisch aus.

In 5 Schritten zum individuellen Schriftbild

Die Einbindung in ein WordPress Theme ist denkbar einfach! Auf der Google Web Fonts-Seite sind alle Schriften, die Google zur Verfügung stellt übersichtlich aufgelistet. Haben Sie sich für eine Schrifttype entschieden, gelangen Sie mit einem Klick auf die Schaltfläche “Quick-use” zunächst zu einer Übersicht der vorhandenen Stile des gewählten Fonts.
Google Web Fonts in WordPress einbinden
Wählen Sie an dieser Stelle eine oder mehrerer Arten der Schrift aus. Sie erhalten praktischerweise einen Hinweis darauf, ob die Geschwindigkeit Ihrer Website unter der Einbindung zu vieler Variationen leidet.
Google Web Fonts Quick Use
Weiter unten bekommen Sie in dem Reiter “Standard” einen bereits vorbereiteten Codeschnipsel, den es zu kopieren gilt. Öffnen Sie die Header-Datei im WordPress-Theme (header.php) und setzen Sie den Codeschnipsel im head-Bereich am besten gleich in der ersten Zeile hinter dem <head> Element ein. Datei speichern nicht vergessen!
Google Web Fonts Code kopieren
Nun müssen Sie noch die neue Schrift in der CSS-Datei (style.css) in der üblichen Weise den passenden Bereichen – wie z.B. den Überschriften zuordnen. Das sieht dann für die größte Überschrift so aus:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
Fertig! Die Schriften werden künftig in allen aktuellen Browsern ohne Fehler angezeigt: Chrome, Firefox (ab 3.6), Safari, Explorer 7 und Explorer 8. Sogar im IE 6.
Man sollte allerdings immer eine Ersatzschrift angeben. Nicht nur für den Fall, dass ein älterer Browser die Schrift nicht darstellen kann, sondern auch für den Fall, dass die Schrift vom Google-Server einmal nicht ausgeliefert wird.

turned_in_notGoogle

Wir freuen uns über Ihren Kommentar!

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

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

expand_less
  Elbnetz GmbH hat 4,96 von 5 Sternen 50 Bewertungen auf ProvenExpert.com