Google Font API in Blogger-/ Blogspot-Blogs am Beispiel von Zitaten einsetzen

Google bietet seit einiger Zeit eine Web-Schriftarten API (Font-API) an, die zur Zeit 18 verschiedene Schriftarten und Varianten davon enthält.
Link: http://code.google.com/webfonts

Als Beispiel zeige ich kurz, wie ich eine neue Schriftart in meinem Blogger-Blog benutze.
Hinweise: Ich habe weiterhin noch ein Layout-Template im Einsatz und beziehe mich nicht auf den neuen Blogger Template-Designer!
Bevor man am Template arbeitet, vorher eine Sicherungskopie vom aktuellen Template herunterladen (Design ->HTML bearbeiten und dann den Link "Vollständige Vorlage herunterladen")

Ich habe bei mir die Font-API nur zur Anzeige von Zitaten /Quotes im Einsatz. Im CSS-Teil des Blogs wird dazu die CSS-Klasse blockquote abgeändert.


Ein völlig sinnfreies Zitat als Beispiel:

Der frühe Wurm fängt den Fisch und Nachts ist es kälter als draußen.
"Houston, ich habe ein Problem: Mein Mieder zwickt..."
Zitat von  J.R. von Goethe, 1492, Verlag O'Reilly in "Ode an Schiller, der olle Räuber" anlässlich der Mond-Erstbesteigung im Jahr 42 v.Chr.

In der sehr hilfreichen Font Preview-Ansicht, in der man die diversen Einstellungen sehr einfach vornehmen kann, stehen die geänderten Einstellung sofort als Vorschau zur Verfügung.
Unterhalb des Beispieltext sieht man alle Werte zu den CSS-Einstellungen.

Zuerst muss der Link zu der entsprechenden Schriftart in das Blogger-Template eingebunden werden.
In der Preview steht dieser an erster Stelle, wichtig ist, dass man denn fehlenden Schrägstrich am Ende des Links, manuell hinzufügt. Sonst meckert Blogger...

<link href="//fonts.googleapis.com/css?family=Cardo:regular" rel="stylesheet" type="text/css" />

Der Link muss vor dem Abschnitt </head> im Blogger-Template eingefügt werden!

Dann sucht man im Template die CSS-Klasse blockquote und ersetzt sie mit dem Code aus der Font-API-Preview (meine Angaben weichen leicht von dem Screenshot ab), die oben zu sehende style-Anweisung nutze ich nicht in meinem Beispiel:

blockquote {
font-family: 'Cardo', serif; font-size: 16px;
font-style: italic; font-weight: 400;
text-shadow: 2px 2px 2px #bbb;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1,20em;
margin:1em 20px;
background: #EDEDED url(http://URL zum Bild: Anführungszeichen)
top left no-repeat;
padding: 8px 8px 8px 65px;
}

Nun wird immer wenn ich in einem Post ein Zitat schreibe und diesen Text markiere und dann den Zitate-Button im Blogger-Editor anklicke ( am Textanfang und am Textende wird dadurch ein blockqoute-HTML-Tag hinzugefügt und bei Erstellung der Webseite werden die Angaben der CSS-Klasse genutzt) mit der neu hinzugefügten Schriftart dargestellt.

In meinem Blog wird zusätzlich noch der Text grau unterlegt und ein großes Anführungszeichen am Textanfang angezeigt (erzeugt durch: margin:1em 20px; background: #EDEDED url(http://URL zum Bild: Anführungszeichen) und top left no-repeat; padding: 8px 8px 8px 65px;)

Man sollte es nicht mit den zusätzlichen Schriftarten übertreiben. Viele sehen auf den ersten Blick toll aus, sind aber in der Praxis auf Dauer anstrengender am Bildschirm zu lesen.
Zusätzlich erhöht sich auch minimal die Ladezeit.

Die Anzeige der Schriftart sollte man auch mit anderen Browser testen, der Internet Explorer 8 (IE8) zeigt mein Zitat doch erheblich anders an. Sprich, in lausiger Qualtität...

Anzeige mit dem Firefox 3.6.8:

Anzeige mit dem aktuellen IE8:

Ähnliche Beiträge zum Thema/Kategorie: