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!

Webfonts?

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, <font>-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 <style type='text/css'> 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.

So, das könnte jetzt für viele etwas Altbekanntes gewesen sein, ich hoffe aber, ein paar hat das jetzt weiter geholfen :)

Wer noch Fragen hat, kann sie gerne in den Kommentaren stellen!

Die bisher veröffentlichten Tipps zum Durchklicken (auch auf der Blog Tipps Menüseite):

Blogger-Tipp #2: Start a (beauty)blog – the classy way Blogger Tipp #3: Threaded comments, die zweite Blogger-Tipp #4: Hide my…contact details!
CAPTCHA? Nein, danke! Blogger-Tipp #5: Wie viele Feed-Leser hab ich wohl… Blogger-Tipp #6: Auto Jump Break for Archive & Labels
Blogger-Tipp #7: How to import blogs to bloglovin’ Blogger-Tipp #8: How to make the most out of Windows Live Writer Blogger-Tipp #9: How to customise your sidebar headings
Blogger-Tipp #10: How to automatically add a signature Blogger-Tipp #11: How to add rotating header images  

Eure HTML Tweaking Mutti,

Sharing is sexy:

6 Kommentare

4. Januar 2013 20:24

Vielen Dank für den Beitrag! Für mich war das alles neu! Probiere ich demnächst mal aus. ;)

4. Januar 2013 21:42

Euh... Bahnhof? ;D
Diese How to Posts sind immer wirklich hilfreich, wenn ich mehr Zeit habe, muss ich mir den hier mal genauer durchlesen, vielen Dank! :)


LG

6. Januar 2013 12:57

Mit verschiedenen Webfonts zu arbeiten ist sehr schön und kann die eigene Homepage einzigartig machen. Jedoch habe ich bemerkt, dass der einzelne Browser dies nur schlecht umsetzen und sich eine Art "Zeitverzögerung" einschleicht und das ist eher unschön.

7. Januar 2013 18:43

@ZaubertorteWas denn, Bahnhof ;)

Ist doch alles ganz easy, versprochen!

7. Januar 2013 18:44

@Tanja Das stimmt. Deswegen wies ich auch darauf hin, die Pageload Anzeige im Auge zu behalten, wenn man alle gewünschten Fonts in der Collection hat.

10. September 2013 16:36

Du bisten Held! :D
Ohne das Tutorial hätte ich das nicht hinbekommen ^^

Kommentieren

Danke fürs Einhalten der Netiquette & Comment Policy!
►Bitte von (Blog)URLs in den Kommentaren absehen, sie landen meist ohnehin im Filter und werden nicht veröffentlicht.
International visitors: You're very welcome to comment in English!