Blogger-Tipp #12: How to use webfonts

Es ist der erste Freitag im neuen Jahr, also warum nicht gleich mit einem Tipp starten!

Neues Jahr, neues Design?

Wollt ihr eure Webseite verändern, die default Einstellungen entsprechen aber nicht euren Vorstellungen? Eine gute Möglichkeit, eigene Ideen und individuelles Design umzusetzen, sind Webfonts. Durch einen Hinweis von Sandra von Touching the Rainbow auf Twitter bin ich darauf gekommen, mal zu diesem Thema zu schreiben, also danke Sandra!

Webtypografie bezeichnet die Typografie für digitale Texte und den Gebrauch von Schriftarten im Web. In den Anfängen von HTML wurden die Schriftarten und -stile ausschließlich durch die jeweiligen Einstellungen der Webbrowser bestimmt. Es gab keine Möglichkeit, die auf einer Website angezeigten Schriften zu beeinflussen, bis Netscape 1995 das, inzwischen veraltete, -Tag einführte, das dann in der HTML-2-Spezifikation als Standard festgelegt wurde. Die definierte Schriftart muss allerdings auf dem Benutzerrechner installiert sein. Ansonsten wurde ein „Fallback-Font“, wie z. B. der im Browser eingestellte Standard-Sans-Serif oder Monospace-Font verwendet.

[…]

Die benötigten Schriftdateien werden heute auch von verschiedenen Anbietern wie den Google Web Fonts (ehemals Google Font Library) bereitgestellt, sodass der Webdesigner diese nur noch einbinden und nicht mehr selbst auf dem Webserver zur Verfügung stellen muss.
(Quelle: Wikipedia)

Der Sinn der Webfonts ist also, die gleichartige Darstellung einer Website über jedweden Browser und gleich welche Schriftarten auf den jeweiligen PCs vorinstalliert sind, zu ermöglichen.

Es gibt zwar auch jede Menge Anbieter mit “populäreren” Webfonts, allerdings im Monatsabo – ich persönlich greife daher auf die schon erwähnten Google Web Fonts zurück. Diese lassen sich auf jeder Website, sei es ein Blog oder auch nicht, einfügen. Und ja, auch mein Blog verwendet einige Webfonts.

Schon auf der Startseite sieht man, dass es hier zur Zeit 613 frei verfügbare – auch downloadbar, wenn man die Schriftart auch für Dokumente anwenden möchte! – Schriftarten gibt.

Links in der Sidebar kann man Filter anwenden, um schneller zu seinen Wunschfonts zu gelangen, oben kann man einstellen, ob man lediglich ein Wort, einen Satz oder einen Absatz als Textmuster sehen möchte. Sinnig, da sich manche Schriftarten eher für Text, andere für Titel eignen. Rumklicken ist sinnvoll.

Man kann auswählen so viele man will, ich habe hier beispielhaft drei ähnliche Schriftarten gewählt, die man mit einem Klick auf “Review” nochmal genauer ansehen kann:

Man kann nun alle drei übernehmen, oder auch die kleinen x der jeweiligen Font nutzen. Hat man seine Wunschschriftart für Text oder Titel gewählt klickt man auf “Use”. Alle ausgewählten Schriftarten können auch auf einmal rechts oben runtergeladen werden.

Es wird einem angezeigt, welche Optionen (bold, italics usw) die Schriftart beinhaltet, bzw. wie es sich mit der Pageloadzeit verhält (man muss schon unzählige Schriftarten installieren, um die Pageloadzeit negativ zu beeinflussen).

Um die Schriftart zu verwenden, empfehle ich als einfachsten Weg für Newbies die Javascript Methode:

Diesen Code komplett in die Zwischenablage kopieren.

Dann im Blogger Dashboard auf Layout klicken und ein HTML/Javascript Widget hinzufügen:

Hier den Code – ohne Titel! – einfügen und speichern.

Die Schriftart kann jetzt im Template zugewiesen werden:

Mit Strg + F suchen und den Namen der Schriftart bei der jeweiligen Headings (h1, h2 usw stehen für die verschiedene Überschriftenarten) einfügen (nicht auf die ‘ ‘ Anführungszeichen vergessen). Man kann auch die restlichen Optionen der Headings ändern, wie die Einstellung ob fett, kursiv, upper oder lower case, die Farbe usw. Wer die Textschriftart ändern möchte, sucht am besten nach “body, input, textarea”. Oder, wenn bekannt, nach dem Namen der derzeitigen Schriftart 😉

Speichern und fertig! So einfach ist das.

Will man eine weitere Webfont hinzufügen, kann man in dem Widget in der Zeile “families” weitere Namen hinzufügen. Wer mit dem Windows Live Writer bloggt kann sich das neue Design ganz einfach mit einem Klick auf Blogkonto – Design aktualisieren auf den Schirm holen.