In Thesis 2.0 Google Webfonts hinzufügen und verwenden

Google bietet mehr als 500 Webfonts zur Verwendung auf deiner Seite an!

Du weißt bereits, wie wichtig Typographie ist. Du weißt, dass auffällige Schriftarten deine Konversionsrate erhöhen können und deine Seite dabei unterstützen, deinen Ton widerzuspiegeln und deine Zielgruppe besser anzusprechen.

Aber es gibt Tausende Schriftarten da draußen. Vielleicht hast du sogar Hunderte auf deinem eigenen Rechner. Wozu also Google-Fonts?

Google Fonts in Thesis benutzen

Ganz einfach: Um für den Besucher so auszusehen, wie auf deinem eigenen Computer, müssen diese Schriftart von den Geräten deiner Besucher auch unterstützt werden.

Stehst du auf Helvetica, hast du wirklich Geschmack – aber die meisten Windows-Nutzer können Helvetica nicht sehen. Sie werden auf den “Fallback”-Font zurückgreifen, der auf ihrem System installiert ist.

Willst du diese Art von Problemen vermeiden, bieten sich die Google Webfonts an.

Google Webfonts verlassen sich nicht auf die Schriftarten, die auf dem Rechner eines Besuchers installiert sind: Die Schriftarten von Google interessieren sich nicht für die Plattform. Mit anderen Worten heißt das: Eine Seite, die z.B. den “Droid Serif” Webfont von Google nutzt, wird überall exakt so aussehen, wie du es dir vorgestellt hast, selbst wenn die Schriftart nicht lokal installiert ist oder unterstützt wird.

Und wie funktioniert’s? Google-Schriftarten werden vom Rechner deines Besuchers heruntergeladen (und zwar schnell), woraufhin der Font auf jeden Text angewendet wird, dem die Schriftart zugewiesen ist.

Der “Download”-Teil verdient dabei eine Bemerkung: Google-Fonts sind zwar auf schnelle Verfügbarkeit optimiert, doch jeder weitere Font verlangt deinen Besuchern Bandbreite ab. Jeder Google-Font auf deiner Seite wird also die Ladezeit der Seite reduzieren.

Google Fonts in Thesis benutzen

Ein oder zwei Google-Fonts werden der Geschwindigkeit deiner Seite keinen nennenswerten Schaden zufügen – aber Dutzende dieser Schriftarten würden da schon deutlicher einschlagen.

Sei wählerisch, verwende zwei oder drei Google-Fonts, und du kannst Schlüsselbereichen deiner Seite eine schönere Optik verpassen – ganz ohne Bilder.

Google Web Font in Thesis 2.0 installieren

Schritt 1: Wähle deine gewünschte Schriftart aus dem Repertoire an Google Webfonts, klick auf den “Quick-use”-Link, scrolle nach unten und kopiere den nötigen Code.

Schritt 2: Füge den Google Font Code aus Schritt 1 im Administratorbereich von WordPress in Thesis 2.0 ein: Wähle Thesis, dann HTML Head Editor und schließlich Head Scripts.

Schritt 3: Wende den gewünschten Font im Thesis 2.0-Interface – im CSS-Tab im Skin Editor – auf die Bereiche deiner Webseite an, in denen du den entsprechenden Google-Font verwenden möchtest.

Abgesehen vom Speichern war’s das!

Sehen wir uns mal ein richtiges Anwendungsbeispiel ein, um diese Schritte klarzumachen:

Zu Demonstrationszwecken verwenden wir mal den Google-Font namens “Shadows Into Light” für den Seitentitel und den Google-Font namens “Dosis” als Tagline.

Das führt uns vom ursprünglichen Design des Seitentitels und der Tagline wie dieser..:

In Thesis Google Fonts nutzen

… zu einem Design, das in etwa so aussieht:

In Thesis Google Fonts nutzen

Schritt 1 bestand darin, deinen gewünschten Google Font auszusuchen. In den Google Web Fonts lässt es sich zum Glück sehr einfach browsen.

Hast du einen gefunden, der dir gefällt – in unserem Beispiel die “Dosis”-Schriftfamilie – klick auf den untenstehenden “Quick-use” link:

Web Fonts in Google finden

Nachdem du einen bestimmten Font ausgewählt hast, wirf einen Blick auf “Page Load”, um einen groben Eindruck davon zu gewinnen, wie viel Verzögerung du deiner Seite zumutest. Markiere und kopiere dann den Code in dem blauen Bereich am unteren Ende des Bildschirms.

Beachte, dass untenstehende Abbildung bearbeitet wurde, um die wichtigen Stellen für unsere Zwecke zu markieren.

Web Fonts in Google finden

Und schon hast du eine Google-Schriftfamilie, du die prompt in Thesis 2.0 hinzufügen und verwenden kannst.

Möchtest du gerne mehr als einen Font auswählen, kannst du mit Alt-Tab zwischen den Google-Webfonts und Thesis hin und her schalten, um die Fonts hinzuzufügen, die du im Thesis-2.0-Interface verwenden willst.

Also besinnen wir uns doch auf Schritt 2: Gehe nach Thesis, dann HTML Head Editor und fahre mit der Maus über Head Scripts, um auf das “Zahnrad” zu klicken, wie unten dargestellt. Womöglich siehst du vor “Head Scripts” noch ein paar graue Kästen mehr – aber es ist da!

Head Scripts Einstellungen in Thesis 2

Das Zahnrad unter Head Scripts bringt dich zum nächsten Bildschirm:

Hier kannst du beliebig viele Google-Fonts hinzufügen – vergiss nicht, jeder Font schränkt die Performance deiner Seite ein wenig ein, und Head Scripts werden auf deiner Seite global abgerufen.

Alle, die nicht die Ninja-Pipe-Methode* verwenden, können pro Zeile einen Font hinzufügen:

Head Scripts in Thesis 2

Für alle, die dieses Tutorial zu Testzwecken nutzt, bevor sie ihre eigenen Fonts aussuchen, gibt’s hier die zwei Codezeilen aus der Abbildung oben:

<link href='<a rel="nofollow" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light'">http://fonts.googleapis.com/css?family=Shadows+Into+Light'</a> rel='stylesheet' type='text/css'>

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

*Optionales Ninjitsu: Du kannst mehrere Font-Requests kombinieren, um einen Teil der Leistungseinbußen deiner Seite zu eliminieren. Benutze dazu den senkrechten Strich (bzw. “Pipe”), etwa so:

<link href='<a rel="nofollow" href="http://livepage.apple.com/">http://fonts.googleapis.com/css?family=Shadows+Into+Light|Dosis'</a> rel='stylesheet' type='text/css'>

Beide Methoden funktionieren – aber über “Ninja Pipes” zu sprechen, wird deine Freunde wohl eher beeindrucken.

Schließe das aktuelle Fenster, Save HTML Head, und auf zum letzten Schritt: Die Fonts anwenden, wann und wo immer du willst.

In unserem Beispiel geht es uns um den Seitentitel und die Tagline. Höchste Zeit also, Skin Editor anzuklicken.

Geh zur CSS, dann such nach Site Title &title unter den Packages auf der rechten Seite – unten ist “Site Title” markiert.

CSS anpassen im Skin Editor von Thesis

Nicht vergessen, die beiden CSS-Packages in diesem Tutorial sind Site Title und SiteTagline – wie wir sehen werden, ist der einzig nennenswerte Unterschied der fragliche Google-Font, den wir ihnen jeweils zuweisen werden.

Klick auf das CSS-Package namens Site Title &title, um das Single Element Styles Pop-Up-Fenster zu öffnen, klick auf Additional CSS, und füge folgende CSS-Zeile über den beiden bestehenden Werten ein:

#site_title { font-family: 'Dosis'; }

Wenn du fertig bist, sollte es in etwa so aussehen – deine neue Zeile steht am Anfang des Texteingabefeldes in der folgenden Abbildung:

Google Font Code im CSS einfügen

Speichern – das ist der grüne Button – und das Pop-Up-Fenster schließen.

Ähnlich geht’s weiter: Suche Site Tagline &tagline und klick drauf:

Die Adresse des Fonts der Seiten Tagline zufügen

Genau wie mit Site Title klickst du auf Additional CSS und fügst die folgende Zeile hinzu:

#site_tagline { font-family:"Shadows Into Light"; }

Hier gibt es keine voreingestellten Werte – wahrscheinlich wird deine eigene Codezeile die Einzige sein, wenn du fertig bist:

Font Applikation in den Tagline Selector

Speichern — grüner Button — und Pop-Up-Fenster schließen.

Und noch einmal speichern – ja, wieder ein grüner Button, Save CSS — und du hast einen Seitentitel und eine Tagline in zwei verschiedenen Google-Fonts.

In Thesis 2.0 findet sich fast immer mehr als eine Lösung, um die Sache hinzubiegen.

Zum Beispiel hättest du die letzten beiden CSS-Zeilen dem Custom CSS-Bereich im CSS-Tab hinzufügen können. Aber es ist hilfreich, mit spezifischen CSS-Packages zu arbeiten – oder zumindest gut zu wissen, wie es geht.

Ein Grund dafür ist Folgender: Wir haben unserem Seitentitel und unserer Tagline eine andere Schriftfamilie zugewiesen, aber an der Schriftgröße und anderen Schrifteigenschaften haben wir nicht gedreht. Hast du gerade die CSS-Package für den Titel oder die Tagline offen, kannst du deinen Google-Font direkt aus dem 2.0-Interface im Handumdrehen anpassen. Eine neue Schriftgröße (und allerlei weitere Veränderungen) wird genauso einfach übernommen, wie es bei voreingestellten Fonts der Fall wäre.

Hinzu kommt, dass deine Google-Webfonts eventuell nicht sofort und in Echtzeit auf die Benutzeroberfläche von Thesis 2.0 angewendet werden. Um sicherzustellen, dass deine Veränderungen auch übernommen wurden, solltest du zunächst speichern und deine Seite dann in einem anderen Browser oder zumindest in einem neuen Tab des aktuellen Browsers öffnen.

In diesem Tutorial haben wir uns zwei Beispiele angesehen, den Titel und die Tagline.

Aber wie du vielleicht schon erraten hast, könnte man dieselbe Prozedur auch verwenden, um Google Webfonts auf andere CSS-Packages anzuwenden.

Hast du einen Google-Font schon in den Head Scripts abgerufen, bist du ein schlichtes “Kopieren-und-Einfügen” davon entfernt, ihn praktisch überall auf deiner Seite anzuwenden.

Mit über 500 Fonts zum Spielen ist so gut wie sicher, dass du für die wirklich wichtigen Textstellen deiner Seite immer den perfekten Look findest.

VN:F [1.9.22_1171]
Rating: 10.0/10 (17 votes cast)
VN:F [1.9.22_1171]
Rating: +8 (from 8 votes)
In Thesis 2.0 Google Webfonts hinzufügen und verwenden, 10.0 out of 10 based on 17 ratings

{ 1 comment… read it below or add one }

Christian January 26, 2013 at 20:10

Danke für den Hinweis.

Mal eine ganz doofe Frage. Wo kann ich bei Thesis 2.0 beim dem Classic Skin nur eine Spalte einstellen? Also das Ganze ohne Widget Leiste recht?

Danke

Reply

Leave a Comment

*

Previous post:

Next post: