Blogging Tips Reviews

[Blogging Tips] Schriftarten mit Google Fonts

Google Fonts

Hallo ihr Lieben :) Ich wurde gefragt, wie ich das mit den Überschriften gemacht hätte, ob das ein Plugin oder vielleicht auch eine Grafik wäre. Nein, das geht viel einfacher! Und zwar habe ich dazu Google Fonts genutzt. Google bietet eine Datenbank für Schriftarten an (bisher nur auf englisch), die momentan 651 Schriftarten enthält. Auf der Startseite kann man zunächst eingeben, ob man Serifenschriften (wie beispielsweise Cambria oder Times New Roman) oder serifenlose Schriften (z.B. Arial) angezeigt bekommen möchte. Auch die Option Handwriting steht zur Verfügung – meiner Meinung nach der interessanteste Berich in puncto Blogdesign ;)

Schriftarten auf dem Blog einfügen – So geht’s!

Im Bereich Preview Text könnt ihr zunächst einen Beispieltext eingeben. Hier lohnt es sich, gleich den Text einzugeben, für den man die Schrift nutzen will, zum Beispiel ein „Herzlich Willkommen“. So sieht man gleich, wie die einzelnen Wörter später ausssehen. Nun könnt ihr euch erst einmal durch die Masse an Schriften wühlen. Wenn ihr euch für eine entschieden habt, klickt auf den nach rechts zeigenden Pfeil, der euch zum „Quick-use“ führt:

Google Fonts

Auf der sich daraufhin öffnenden Seite wird sehr anschaulich erklärt, wie ihr die Schrift in euer Layout einbauen könnt. Ich habe es euch trotzdem noch einmal kurz auf deutsch zusammengefasst:

Zunächst müsst ihr im Kopfbereich des Layouts, also zwischen <head> und </head> eintragen, dass die Schrift sozusagen vorgeladen werden soll. Dazu kopiert ihr die Zeile, die ihr unter Add this code to your website findet. Bei meiner Beispielschrift Shadows into Light ist das die folgende Zeile:

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

Wenn ihr die Schriftart festgelegt habt, müsst ihr nur noch in eurer CSS-Datei eintragen, welcher Bereich die Schriftart übernehmen soll. Dazu kopiert ihr die Zeile, die unter Integrate the fonts into your CSS steht und fügt sie in das Element ein, bei dem ihr die neue Schriftart verwenden wollt. Ich habe hier zum Beispiel eine Überschrift gewählt:

h2 {
color: #7CB2D4;
text-align: center;
font-family: 'Shadows into Light', cursive;
}

Noch ein Hinweis: Prinzipiell könnt ihr beliebig viele Schriftarten so in eure Webseite integrieren. Jedoch sind zu viele verschiedene Schriftarten zu kompliziert zu lesen und zudem verlangsamen zu viele Schriftarten die Ladezeit der Webseite, da jedes Mal, wenn die Seite aufgerufen wird, zunächst die Schriftarten vorgeladen werden. Achtet also darauf, nicht zu viele Schriftarten zu nutzen.

Ich hoffe, ihr fandet das kleine Tutorial hilfreich :)
Falls ihr Ideen oder Wünsche habt, wozu ich ein Tutorial schreiben soll, hinterlasst mir gern einen Kommentar :love:

5 Kommentare

  • Antworten
    A.

    Benutze auch super gern verschiedene Schriften – da ist das wirklich hilfreich!

    Liebst,

    A. von http://littlefashionfox.blogspot.de/

  • Antworten
    Julia

    Finde die Erklärung super! Falls ich mal wieder etwas an meinem Design ändern möchte, werde ich auf jeden Fall hierauf zurück kommen :-)

    Liebe Grüße

  • Antworten
    Patty

    Super guteTipps ich finde es super solche unterschiedlichen Schriften zu benutzen :)

    Liebe Grüße :)
    http://measlychocolate.blogspot.de

  • Antworten
    Evy

    Danke, das ist echt hilfreich!

  • Antworten
    Alles neu macht der – äh – November | Wintermensch

    […] Dinge wollte ich aber gerne noch erwähnen, die mir gestern sehr nützlich waren. Zuerst das schöne Tutorial von Missi, wie man Google Fonts für die Überschriften im Blog […]

  • Schreibe einen Kommentar!

    :) 
    :D 
    ;) 
    :( 
    ._. 
    o_O 
    X_x 
    ^^* 
    :love: