Google-Fonts einbinden

Lobster-SchriftpanelWenn Ihre Website aussieht wie jede andere, Grafik- und Foto­wechsel nichts mehr verbessern, dann kann es vielleicht an der Typografie liegen? Die Möglichkeiten hierbei sind im Grunde nicht so vielfältig. Ein aus­ge­wogenes Verhältnis von Schriftgrad, Schriftfarbe und Zeilenabstand gehört zu den Mindest­an­forde­rungen ausgewogener Webtypo. Die Wahl besonderer Schriftart ist schon schwieriger und sehr begrenzt. Mit Hilfe der Google Font-API entsteht derzeit eine einfache Möglichkeit, auf Ihrer Site neue Schriften einzubinden.

Schriftenvielfalt bisher mit Nachteilen behaftet

Diese API war ist eine Betaentwicklung von Google. Dass die Font-API funktioniert, und Fonts auf einfache Weise eingebunden werden können, sehen Sie schon an dieser Site. Hier wird als Headline-Schrift die Lobster eingesetzt. Bislang musste man entweder auf die weit verbreiteten Schriften der Win- und Applewelt setzen, wenn man viele User auf vorbestimmte Art erreichen wollte: Arial, Helvetica und Verdana auf der Grotesk­schrift­seite und Georgia und vielleicht auch Times bei den Serifenschriften und das war es schon. Alle weiteren Schriften kommen als Bildgrafiken zum Einsatz oder werden server­seitig generiert und ausgeliefert. Diese beiden Methoden haben immer den Nachteil erhöhter Bildanteile und damit Verlust an Bandbreite zur Folge: die Seite wird langsamer.

Gute Schriften sollen im Körbchen bleiben

Mit dem @font Tag ist es möglich, auf einer Site Profischriften einzubinden. Für einen Designer ist das verlockend, da ihm im Alltag hunderte von Schriftarten zur Verfügung stehen. Leider kann die damit eingebundene Schrift heruntergeladen werden. Das sehen Schriftenhersteller nicht gerne, da damit sich ihre teueren Produkte auf der Welt verteilen würde. Die Lizensierung erlaubt zumeist nur den lokalen Einsatz am PC und nicht im Web. Google macht sich nun auf, mit der Bereitstellung kostenloser Schriften die Welt zu bereichern.

Einbindung einfach

An einem Beispiel will ich aufzeigen, wie man eine Googleschrift wählt und auf seiner Site einbinden kann. Besuchen Sie zunächst die Fontübersicht von Google Webfonts.

1. Überblick

Wenn Sie die Liste von Google Webfonts herunterscrollen, finden Sie eine stattliche Anzahl von über 50 Fonts. Ein Großteil der Fonts sind Schmuckschriften und können als Brotschrift nicht genutzt werden. Das heißt, Ihnen fehlen dann verschiedene Schnitte wie kursiv, bold usw. Allerdings sind einige Fonts mit bis zu 10 Schnitten gut ausgebaut. Die IM Fell bietet echte Kapitälchen! Hoffentlich lassen sich die Schriftentwickler davon inspirieren!

2. Schriftencheck

Wenn Sie eine Schrift auswählen, können Sie weitere Informationen einholen. Über diverse Reiter können Sie sich durchklicken:

Schauen Sie, abhängig von der Verwendung, ob die Schrift das Gewünschte bringt. Vielleicht ist die Schrift in kleineren Graden schlecht lesbar. Dann taugt sie nichts als Fließtext, sondern für Überschriften. Schrift für den Lauftext wirkt vielleicht in größeren Schriftgraden nicht so gut usw.

3. Schnitte vorhanden?

Obligatorisch ist der Klick auf den Reiter mit den vorhandenen »Varianten« (Variants), besser: den Schnitten des Fonts. Ist der fette Schnitt fett genug oder eher eine Medium­variante? Wie ist die Kursive aufgebaut. Ist es eine echte Kursive oder nur eine schräg­ge­stellte Variante des normalen Schnitts, also unschön? Oder gibt es keine Kursive (das ist im Web noch einigermaßen erträglich, da kursive Auszeichnung nicht ausreichend wirkt)?

Eine schnelle Überprüfung der enthaltenen Zeichen (»Characterset« — siehe oben) gibt Auskunft über Sonderzeichen und Umlaute, die der Font enthalten sollte. Als besonders Schmankerl kann man oben links auf den Button »Launch in Font Previewer« klicken und seinen Font live ausprobieren. Ein Probetext kann frei in ein Versuchsfeld eingegeben werden. Mittels Schieber kann man den Schriftgrad usw. manipulieren.

4. Einbindung in HTML

Interessant und Probe auf versprochene Funktionstüchtigkeit bringt der Test auf Einbindung. Auf obiger Abbildung wird schon die Art und Weise der Einbindung des Fonts mit Style-Tag für HTML und die CSS-Formatierung angezeigt. Beim letzten Reiter der Schriftenübersicht: »Use this Font« wird auch Anleitung zur Einbindung der Wunschschrift mit allen Schriftschnitten einer Familie gegeben.

a) Schriftenfamilie zusammenstellen:
klicken Sie die Checkboxen, um die von Ihnen vorgesehenen Schriftschnitte zu aktivieren. Vielleicht brauchen Sie Regular, Italic, Bold. Gleichzeitig zum Klicken ändert sich der nötige Einbindungslink dieser Schriftfamilie, den Sie im Codefeld per Copy & Paste entnehmen und im Headbereich Ihrer Site einbinden:

Beachten Sie, dass mit eigener Syntax gewünschte Schnitte einer Familie eingebunden werden. Aber darum brauchen Sie sich nicht wirklich zu kümmern, denn Google stellt den passenden Code auf Klick zusammen.

b) In CSS ansprechen:
In dem Stylesheet Ihrer Site binden Sie die neue Schrift als Sondername auf bekannte Weise (mit Hochkommata) ein, etwa so

h1, h2, h3
{
  font-family:'Cantarell', arial, sans-serif;
  font-weight:normal
}

Einfach oder? Die Deklaration des Font-weight auf normal ist nur dann nötig, wenn Sie eine Schrift ohne Bold-Schnitt verwenden, damit Sie durch einen Webbrowser nicht unnötig gefettet wird. Denken Sie daran, dass Überschriften (h1, h2, h3…) als Default-Wert auf bold gesetzt sind (das gilt nur dann, falls Sie nicht ein Style-Reset benutzen).

Google Fonts in WordPress einbinden

Mittlerweile gibt es ein neues WP Google Fonts Pluggin, welches per Knopfdruck und gezielt für entsprechende Tags gewünschte Googlefonts einbinden kann.

Comments are closed.

QR Code Business Card