Google Fonts für deinen Blog

Google Fonts ist ein kostenloser Service von Google mit tausenden von verschiedenen Schriftarten, welche man mit einem einfach Code ohne viel HTML-Kenntnisse auf seinem Blog oder seiner Webseite einbauen kann. Man kann Schriftarten aus sechs verschiedenen Kategorien auswählen: Serif, Sans-Serif, Display, Handwriting und Monospace.

Viele der aktuellen WordPress Themes haben bereits die komplette Google Fonts – Bibliothek eingebunden, sodass dieser Schritt gar nicht erst notwendig ist! Für Blogger.de – Blogs ist dies aber meist der einzige Weg, an diese Schriftarten zu kommen.

Google Fonts für deinen Blog | butfirstcreate.com

Serifen-Schriften

Zu den Serifen-Schriften gehören Fonts wie Georgia oder Times New Roman. Es sind Schriften, welche durch (mehrere) feine Linien abschliessen, sogenannte „verschnörkelte“ Schriften. Bücher und längere Texte, welche gedruckt werden, werden vorzugsweise mit Serifen-Schriften geschrieben, da es für das Auge angenehmer ist. Auf dem Bild unten seht ihr ein paar Beispiele:

Serifenlose Schriften

Die bekanntesten serifenlosen Schriften sind Arial (verwende ich auf meinem Blog) und Verdana. Man sagt, auf einem Bildschirm sind serifenlose Schriften viel angenehmer zu lesen als Serifen-Schriften. Bei den Sans Serif Schriften sind die Buchstaben gleichmässiger und haben kein Geschnörkel. Hier seht ihr ein Beispiel:

Display, Handwriting und Monospace

Display-Schriften ist der Begriff für die Schriftarten, welche nicht als normale Satzschriften entwickelt wurden. Diese werden meist nur für Headlines oder kürzere Sätze in der Werbung verwendet, da sie meist dekoriert sind und relativ gross verwendet werden. Für die Schriftart der Post-Titel eignen sich diese hervorragend.

Der Name der Handwriting Schriften erklärt eigentlich schon ziemlich genau, um welche Schriften es sich hierbei handelt: Handgeschrieben. Ich verwende solche Schriftarten sehr gerne auf Bilder oder Grafiken, für den Titel oder gar den Text sind sie meiner Meinung aber nicht geeignet. Eventuell noch für einen Titel, wenn es eine Schrift ist, welche einfach entziffert werden kann. Aber bloss die Finger weg von Handwriting Schriften für euren Post-Text! :)

Die Monospace-Schriften zeichnen sich durch ihre feste Zeichenbreite aus, sie werden auch Festbreiten- oder nicht proportionale Schriftengenannt. Für einen Text würde ich diese Schriftart nicht verwenden, da sie wie gesagt, nicht proportional ist, das heisst, für das Auge ist eine Monospace-Schrift mit der Zeit ziiiiieeeeemlich anstrengend. Für den Posttitel kann man sie aber natürlich auch verwenden.


Man merke also: für einen längeren Text, das heisst, eure Standardschrift sollte eine Schriftart aus der Familie der serifenlose oder Serifen-Schrifte sein. Für Titel eignen sich aber auch die Monospace, Handwriting oder Display-Schriften.

Einbettung der Google Fonts

Kommen wir nun zurück zu Google Fonts. Wie gesagt ist es sehr einfach, eine dieser Schriften selbst einzubauen und dadurch das Erscheinungsbild deines Blogs aufzuwerten oder zu verändern.

Sobald ihr euch für eine Schriftart entschieden habt, ihr könnt oben rechts übrigens auch nach einer bestimmten Google Font suchen, könnt ihr auf das kleine, rote + klicken. Ihr könnt so auch gleich mehrere Schriften auswählen, um alle gleichzeitig in den eigenen Blog einzubinden.

Wenn du mit deiner Auswahl zufrieden bist, kannst du am unteren Bildschirm auf „X Family(ies) Selected) klickem, es öffnet sich ein kleines Fenster. Unter Embed kannst du die Art des Imports auswählen, unter Customize kannst du die unterschiedlichen Schriftschnitte noch anwählen. Es lohnt sich, mehrere Schriftschnitte zu installieren, sodass du mit der gewünschten Schriftart auch den Text durch zum Beispiel den Bold-Schnitt hervor heben kannst.

Anschliessend wird unter Embed dein Code ausgegeben, der ungefähr so aussieht:

Nun könnt ihr bei Blogger auf die HTML-Bearbeitungsseite klicken (bei WordPress in die header.php-Datei wechseln) und diesen Code vor dem geschlossenen /head> Tag setzen. Diesen Tag findet ihr ganz einfach mit der Tastenkombination STRG + F bzw. CMD + F. Speichert die Datei ab.

Blogger Users suchen nun auf der selben Seite nach .post-body { – WordPress-User in der style.css nach body { (je nach Theme kann es auch etwas anderes sein, falls ihr es nicht findet, schreibt mir!) und ihr fügt nun den CSS-Code von der Google Fonts Seite ein, welchen ihr zu unterst findet:

font-family: ‚Noto Serif‘, serif;

Ich hoffe, ich habe das ganze Thema einigermassen verständlich erklärt, falls nicht, traut euch ruhig, mir Fragen zu stellen! :D

Schreibe einen Kommentar

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

*
*