13. November 2013

how to change fonts for you header

Ich war lange auf der Suche nach einer schönen Schrift für meinen Header.
Am liebsten hätte ich die, mit der ich meine Bilder und Collagen auf "moldiv" am iPad signiere. "Amaticsc".
Bei Google Fonts bin ich nun endlich fündig geworden.
Jetzt gibt es nur noch das Problem, diese Schrift in den Header zu kriegen.
2 Stunden habe ich gebraucht, um ihn mit Hilfe verschiedener Tutorials so hinzubasteln, wie ihr ihn jetzt seht.

Also:

1. Bei Google Fonts eine schöne Schrift aussuchen

2. Wenn ihr eure Lieblingsschrift gefunden habt, klickt auf das kleine Kästchen rechts mit dem Pfeil, der nach rechts zeigt. Wenn ihr mit dem Cursor draufgeht erscheint "Quick use"

3. Die Seite die dann aufgeht, beschreibt den Font näher. Ihr scrollt jetzt bis

 "3. Add this code to your website"

wählt den kompletten Code aus und kopiert ihn.

4. Jetzt geht ihr bei Blogger auf "Vorlage" und "HTML bearbeiten" und pasted den Code unter
<head>
am Ende müsst ihr vor dem > eures Codes noch / einfügen, dass sieht dann so aus />, damit weiß das Programm, dass der Code hier zuende ist.

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

5. Danach geht ihr zurück auf Google Fonts und scrollt weiter runter bis

 "4. Integrate the fonts to your CSS"
Auswählen und kopieren.

6. Jetzt geht ihr wieder zurück auf euren HTML Code. Die Details eurer Webseite sind im CSS gespeichert, damit die HTML-Seite aber nicht so voll ist, sind diese Details versteckt. Wenn ihr genau hinschaut, seht ihr links bei den Zeilennummern dunkle Pfeile, wenn ihr da draufklickt, erscheint das CSS. Bei mir ist es beispielsweise ab Zeile 14. Das steht dann

  <b:skin>

7. Hier müsst ihr jetzt ganz weit runter scrollen bis etwa Zeile 249

.Header h1 {
Darunter muss man den CSS Code einfügen:

.Header h1 {
  font-family: 'Amatic SC', cursive;
font-size: 120px;

Weil mir die Größe nicht gefallen hat, habe ich darunter, wie ihr oben seht die Zeile "font-size" eingefügt. Das Gute ist, dass man die Pixelzahl ändern kann und sich dann die Vorlage ansehen kann, ob die Größe so passt. 

Mir haben folgende Blogs beim Lösen dieses Problems geholfen:
xomisse
code it pretty

Viel Glück beim ausprobieren und nur Mut!!
Gros bisou
Sandra

1 Kommentar: