DIYTheme Fonts

Seit der Version 1.8 von Thesis kann man Google Fonts für Überschriften und Fließtext verwenden. Die Google Schriftarten erhält man über ein CSS und werden von Google kostenlos zur Verfügung gestellt.

Zur Zeit werden 19 Schriftarten zur Verfügung gestellt und durch die Integration über ein CSS wird die Schriftart direkt von den Google-Servern geladen. Somit musst du dich nicht kümmern ob der Benutzer eine jeweilige Schrift installiert hat oder nicht.

Google Schriftarten verwenden^

Um die Schriftarten zu verwenden, navigiere einfach zu dem Menüpunkt “Thesis > Design Options”.

Nun kannst du für jede Sektion der Webseite, sei es Menü oder Content, eine passende Schriftart wählen. Wie bereits im Bild auch zu erkennen ist, wird empfohlen generell nur Schriftarten zu wählen wo ein Stern (*) oder ein G dabei steht. Alle Schriftarten mit “G” werden dynamisch von Google geladen.

Google Webfonts für älteres DIYTheme^

Falls du dein DIYTheme noch nicht auf den neuesten Stand gebracht hast oder kannst (hier eine Anleitung), gibt es natürlich auch Mittel und Wege um die Google Fonts zu verwenden.

Dafür musst du dir die passende Schriftart auf http://code.google.com/webfonts auswählen und “Get the code” wählen.

Nun zeigt dir Google die zu integrierende Teile. Das besteht zum einen aus einen Link zu einer CSS-Datei und zum anderen aus tatsächlichem CSS.

Wenn du bspw. die Schriftart “Droid Sans” integrieren möchtet – Code unterhalb – gehe wie folgt vor:

Erster Schritt – HTML kopieren^

Als ersten Schritt musst du dir den <link….>-Teil von der Google Seite kopieren, er sieht in etwa so aus:

Zweiter Schritt – HTML einfügen^

Nun müssen wir diese CSS-Datei auch in unserer Thesis Installation integrieren. Gehe dazu auf “Thesis > Site Options” und suche die Sektion “Additional Scripts”:

Hier nun den kopierten Teil einfügen und speichern.

Dritter & Letzter Schritt – CSS anpassen^

Nun haben wir die CSS Datei auf jeder Unterseite unserer Webseite integriert. Jetzt müssen wir die “custom.css” öffne um zum Beispiel die H1-Überschriften zu ändern.

In deiner custom.css einfach folgenden Code einfügen:

.custom h1 { font-family: 'Droid Sans', arial, serif; }