About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Google Webfonts einbinden

Mittwoch, 2. Januar 2013

Hallöchen! Ich melde mich auch wieder mit einem Tutorial. Heute geht's darum, sich die GOOGLE WEBFONTS (klick) einzubinden.
Na dann, geht auf die Website, sucht euch eine aus und lest weiter!


Ich habe mir 'The Girl next Door' ausgesucht.
Jetzt geht ihr auf 'Quick-use'
 Jetzt öffnet sich eine neues 'Fenster' dort scrollt ihr herunter, bis ihr auf das stosst:
Bevor wir das weiter benutzen, gehen wir in unseren HTML-Editor (Vorlage -> HTML bearbeiten), und dort suchen wir nach '</head>'.

Darunter fügen wir den Schritt 3 Code, also diesen Code ein.
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
aber jetzt gibt es ein Problem: Wenn wir es so in unseren HTML-Code einbetten, funktioniert nichts! Deshalb müssen wir am Ende vor dem '>' ein '/' setzen, also:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'/>
 Jetzt ist die Schrift in eurem Blog sozusagen 'gespeichert'.

Als nächstes brauchen wir den Code von Schritt 4. Dieser Code gibt an, dass ein bestimmter Teil des Layouts genau diese Schriftart hat.
Hier einige Beispiele, und unter diesen fügt ihr dann den kopierten Code ein. Die Beispiele sind alle in eurem HTML Layout.

Posttitel

Sucht nach h3 in der Verbindung mit post, z.B.:
h3.post-title, .comments h4 {
.post h3 {
h3.post-title, h4 {

Sidebartitel

Sucht nach h2 { (es steht ganz alleine)

Postingbereich

Sucht nach .post {


Sonst geht es auch an vielen anderen Stellen in eurem HTML Teil! :)

12 Kommentare:

  1. ich würde gern den ganzen post so geschrieben haben - wie geht das? :)

    AntwortenLöschen
  2. Hallo Martha, Patrizia und Theresa :)
    Ich wollte mich mal erkundigen ob ihr Interesse an einem Tutorial bzw.ehr einer Definitionsliste über CSS-Begriffe von mir habt :)
    Ich glaube nämlich, dass es einige eurer Leser interessieren würde. Ich würde mich sehr über die Möglichkeit, einen Gastpost zu veröffentlichen freuen :)
    Meldet euch einfach bei Interesse wieder.
    Liebe Grüße, Hanna :)

    AntwortenLöschen
    Antworten
    1. ohja, ich wäre dafür! hoffentlich darfst du, mich interessiert das sehr!

      Löschen
  3. Hallo. Das ist ein wirklich tolles Tutorial, das ich gut gebrauchen kann. :)
    Das neue Design gefällt mir auch richtig gut.

    Ich hab noch eine Frage. Kann man auf diese Art und Weise, wie es oben beschrieben ist, auch mehrere Google Webfonts verwenden?
    Zum Beispiel eine für den Sidebartitel, aber eine andere für den Posttitel?

    Ich würde mich über eine Antwort freuen.
    Alles Liebe, Milena.

    AntwortenLöschen
  4. Jajajajaa ich weiß ihr seid ein "Hilfe"Blog aber so als danke weil ihr mir des öfteren helfen könnt habe ich euch mal getaggt... Ich weiß nicht ob ihr bei sowas auch teilnehmt aber es würde mich sehr freuen c:
    http://paggy-duckless-told.blogspot.de/2013/01/alle-kinder-heien-gunther-auer-peter.html

    AntwortenLöschen
  5. Hallo ihr Lieben,

    frohes neues noch für euch.Wollte nur mal vorbei schauen und bin geplättet wie viele Leser ihr schon habt. Das ging wahnsinnig schnell und ich wette es werden noch viel mehr.

    Liebe Grüße Lukana

    AntwortenLöschen
  6. Hallo ihr,

    ich habe mir von euch das tolle Minima Template gedownloadet und in meinem Blog eingebunden.
    http://voller-leben.blogspot.de/
    Nun habe ich etwas Probleme beim coden. Hinter den Kommentaren steht keine Anzahl mehr, ich habe es zwar schon mit diesem Tutorial http://bloggerlatein.blogspot.com/2012/07/anzahl-der-kommentare-wieder-anzeigen.html
    probiert, aber den gesuchten code erst gar nicht gefunden. und wie kann man "Kommentare" in andere Wörter umbenennen. Im Dashboard Layout, habe ich es nämlich sogar anders drinstehen, das wird aber nicht übernommen.

    Auf jeden Fall auch nochmal danke für das Tempalte und die tollen Tutorials und Tipps.

    Hoffe ihr könnt mir weiterhelfen.

    LG

    AntwortenLöschen
  7. Hallo!
    Mich würde auch interessieren ob es eine Möglichkeit gibt mehrere Fonts einzubauen? Hab schon selbst gebastelt, klappt aber nicht. Nehme an es fehlt dann dafür der entsprechende Befehl?
    Könnt ihr bitte weiterhelfen?

    Lieben Dank!

    Louise
    http://wirglueckskinder.blogspot.de/

    AntwortenLöschen
  8. Hallo :)

    Ich hab eine Frage, darf ich jede Schrift einfach benutzen? Oder muss ich darauf achten, welche ich für den Blog benutzen darf und welche quasi nicht öffentlich sind? ich hoffe ihr wisst was ich meine :D

    Liebst, Janine

    AntwortenLöschen
  9. Ich würde gerne wissen wie man die im Post benutzen kann. Hmm :/

    AntwortenLöschen
  10. Danke für die Anleitung, jetzt klappts auch bei mir!

    AntwortenLöschen