Top Social

11.12.2013

[Tutorial] - Schriftart/Fonts ändern

Da das Vorlagebearbeitungsprogramm von Google Blogger keine große Auswahl an Schriftarten besitzt, habe ich mir einfach mal selbst beigebracht, diese nach meinem Geschmack zu ändern.

Hier mal ein Beispiel:


Somit kann man seinen Blog wirklich so gestalten, wie man es sich vorstellt!

Nach dem Klick findet ihr das Tutorial!





Und so gehts: 

1. Als erstes geht ihr auf Google Fonts, denn daher bekommen wir unsere neuen Schriftarten. Ihr könnt euch anfangs natürlich erstmal durchklicken um eine Übersicht über das Angbot zu erhalten, oder mit der Suchfunktion (s.u.) direkt eine bestimmte Schriftart suchen. Unter der Suchfunktion findet ihr auch ein paar Merkmale die ihr verändern könnt, um schneller etwas passendes zu finden. 


2. Wenn ihr eine Schriftart gefunden habt (in meinem Fall ist das hier "Fredericka the Great"), dann klickt bitte als nächstes rechts auf "Add to Collection".


3. Wenn ihr das gemacht habt, wird aus "Add to Collection" -> "Remove from Collection". Für den Fall, dass ihr euch doch lieber für eine andere Schriftart entscheiden wollt, könnt ihr darauf klicken und eure Auswahl wieder rückgängig machen. 


Wenn ihr zufireden mit eurer Wahl seid, dann klickt unten rechts auf "Use". Nun werdet ihr zu einer neuen Seite weitergeleitet, die so aussieht:


Bei manchen Schriftarten kann man sich jetzt auch aussuchen ob sie Bold (dick) oder in Italic (Kursiv) angezeigt werden. In meinem Fall gibt es nur "Normal 400" und deswegen ist auch links daneben das Häckchen gesetzt.

4. Scrollt weiter runter bis ihr zu diesen zwei Codes kommt:


Beide Codes braucht ihr noch. Für die Unterscheidung habe ich sie gelb und grün markiert.
Den gelben Code kopiert ihr und dann geht es an den CSS-Code eures Blogs. Dafür geht ihr bitte über das "Dashboard" zu der "Vorlage" und dann zu "HTML bearbeiten".


5. Und nun seid ihr bei dem ganzen nervigen Part. Ich bin ehrlich, ich mag dieses ganze HTML-Gefummel nicht wirklich, aber es muss gemacht werden und ich werde versuchen alles so simpel wie möglich darzustellen.

Ihr solltet jetzt das hier sehen:


Im Detail seht ihr es auch nochmal im unterem Bild: ihr nehmt den vorher kopierten (bei mir gelb unterlegten Code), sucht im Code <head> und setzt ihn direkt
darunter.
  (<- befindet sich direkt am Anfang) Dann sollte es so aussehen:


6. Habt ihr? Sehr gut! Jetzt müsst ihr aber etwas an diesem eingesetzten Code verändern. Am Ende des Codes fehlt nämlich ein /
Der Code sieht so aus: css'>   aber er sollte so aussehen: css'/>
zum Vergrößern einfach draufklicken!

7. Wenn das geschafft ist, kopiert ihr bitte den zweiten Code (Grünen Code). Jetzt geht es an die Frage, welche Überschriften ihr verändern wollt? Nur die Überschrift des Beitrags oder auch die Überschriften in der Sidebar?

7.1 Wenn ihr nur die Überschrift des Beitrags ändern wollt:

Sucht in dem Code nach h3.post-title a {   (<- dieser befindet sich bei ca. 367)


Direkt darunter befindet sich "font-family:...". Normalerweise steht dort auch noch eure bisherige Schriftart. Ihr löscht diese Zeile am besten komplett und ersetzt sie dann mit dem grünen Code.

7.2 Wenn ihr die Schriftart eurer Überschriften in der Sidebar ändern wollt:

Sucht den Code h2 {  (<- befindet sich bei ca. 237)


Hier setzt ihr auch einfach den grünen Code anstelle des bisherigen "font-family:..."-Codes ein.

Oberhalb dieses Fensters habt ihr auch die Möglichkeit, eure Veränderungen in einer Vorschau anzeigen zu lassen, bevor ihr sie speichert. Wenn ihr zufrieden seid, solltet ihr natürlich das Speichern nicht vergessen!

Fertig!

Ich hoffe, ich konnte euch damit ein wenig helfen und habe es nicht zu kompliziert gemacht! :)

Habt noch einen schönen Tag,


3 Kommentare on "[Tutorial] - Schriftart/Fonts ändern"
  1. Danke für den Post! Habe nämlich demnächst vor, meine Schriftarten zu ändern :)

    Liebe Grüße, Vanny ♥
    Leere Zeilen

    AntwortenLöschen
  2. Hallo,
    danke für Deine Anleitung. Habe es probiert, aber die Schriftgröße meiner Post Titel ist ziemlich klein. Wie kriege ich die größer? Habe es schon über den Vorlagendesigner versucht, geht aber nicht....? Kannst Du mir einen Tipp geben?

    Liebe Grüße
    Ljiljana

    AntwortenLöschen
    Antworten
    1. Ja klar, ich schreibe dir dazu einen Kommentar auf deinem Blog. :)

      Löschen

Kommentare machen mich glücklich. :)
Also haut in die Tasten...
Antworten meinerseits werden als Kommentare gepostet.