Google Web Fonts in Blogger.com (Blogspot) einbinden

Anzeige

Wenn Sie auf Ihrem blogger.com Blog die Google Web Fonts einbinden möchten, stehen Ihnen dafür mehrere Methoden zur Verfügung. Ich beschreibe hier nur eine Methode, die bei mir stabil funktioniert.


Google Web Fonts bietet interessante Schriften für Webseiten an.
Mit Google Web Fonts können Blogger spezifische Schriften von Google in ihre Blogs integrieren.


Google Web Fonts in einer Blogger (Blogspot) Vorlage verwenden:


1) Auf der Webseite von Google Web Fonts einen gewünschten Schrift aussuchen und ihn auswählen(Button: “Quick Use”)
In dieser Anleitung zeige ich, wie ich die Schrift “Nosifer” in einer Blogger.com Vorlage  integriert habe.


2) Den Reiter @import anklicken. Es wird dort ein ähnlicher Code ausgegeben:

@import url(http://fonts.googleapis.com/css?family=Nosifer);


3) Auf die CSS-Seite der Schrift gehen  (in unserem Fall: http://fonts.googleapis.com/css?family=Nosifer), dort findet man folgenden Code:

@font-face { font-family: 'Nosifer'; font-style: normal; font-weight: 400; src: local('Nosifer'), local('Nosifer-Regular'), url(http://themes.googleusercontent.com/static/fonts/nosifer/v2/fwXLs672oucg0HdjY9ErAg.woff) format('woff');}

Diesen Code kopieren.

4) Den Code im CSS Bereich der Vorlage einfügen, wo CSS Styles definiert sind:

1) blogger.com >  Vorlage > HTML bearbeiten > CSS Styles der Vorlage finden und den Code vom Schrift einfügen

2) Vorlage speichern


Ich habe es z.B. in der alten Vorlage von itslot.de in der nächsten Ziele nach

<b:skin><![CDATA[  eingefügt. In der aktuellen Version von itslot.de hätte ich es nach der Zeile <style> eingefügt. Die Einbindung könnte also von der Vorlage abhängig sein.


Integrierte Schrift im Blog verwenden:


Die eingebundene Schrift kann nun in der HTML-Vorlage oder im HTML-Code eines Beitrags wie folgt verwendet werden: 

font-family: nosifer, cursive;


Beispiel:

<span style="font-size: 32px; font-family: nosifer, cursive; color: #660000">ITSLOT.DE</span>


Als Ergebnis bekommen wir folgendes:
ITSLOT.DE

Wie oben beschrieben, bietet Google unterschiedliche Methoden zur Integration vom Schrift-Code in die Blogger Vorlage an.
Aber ich konnte die Schriften auf diesem Blog nur mit der oben beschriebenen Methode erfolgreich integrieren , sodass es bei mehreren Browser korrekt angezeigt wird.

Kommentar veröffentlichen