Design mit persönlichem Touch!

Mein Notizblock

Hier schreibe ich alle möglichen Dinge auf, die ich mir im Zusammenhang mit Webdesign und sonstigem Design merken möchte. Falls jemand hier was Brauchbares für sich findet, fein! Falls jemand zu einem Thema weitere Vorschläge oder Verbesserungen weiß, nur her damit!

Back
Google Fonts, ein Traum
November 1st, 2013 5:46 pm

In dem – auf dieser Site vielfach erwähnten – Webdesign Kurs wurde ich darüber aufgeklärt, dass man natürlich nicht wissen kann, welche Schriften letztendlich beim Nutzer installiert sind, weswegen man mit CSS gleich eine kleinere Schriftauswahl angibt, die der Browser zum darstellen verwenden soll. So kann man zumindest ein klein wenig erahnen, wie das Schriftbild dann letztendlich beim Besucher einer Website aussieht.

Ganz so dramatisch ist das Problem natürlich nicht, solange man sich an Standardschriftarten hält, wie zum Beispiel Times New Roman, oder Helvetica – oder halt einfach Schriften, die weit verbreitet sind. Wenn man was ausgefallenes will, wird das allerdings schon schwieriger. Ausgefallene Schriftarten sind nicht bei jedem installiert.

Mit Google Fonts hat man das Problem schnell gelöst! Ich bin begeistert. Dort gibt es richtig coole Schriftarten, die man ganz ganz einfach verwenden kann, und die – wenn ich das richtig verstanden habe – für jeden Besucher der Site mitgeladen werden. Und schon hat man die volle Kontrolle über das Schriftbild.

Ja, das geht ein klein wenig auf die Ladezeit der Seite, da halt “extra” was geladen werden muß. Meiner Meinung nach ist das aber in der heutigen Zeit nicht so dramatisch, vor allem, wenn man sich auf ein paar wenige Schriften beschränkt. Ich war selbst extrem überrascht, wie einfach das alles geht… Aaaalso, es geht im Prinzip so:

  • Schau einfach mal auf Google Fonts und such Dir eine Schriftart (oder mehrere) aus. Wenn Dir eine gefällt, klick einfach auf “Add to collection” (das steht hinter der Schrift).
  • Unten auf der Seite siehst Du dann einen grau hinterlegten Kasten, in dem Deine Auswahl angezeigt wird. Dort kannst Du Dir die Schriften auch nochmal angucken, oder welche löschen – das ist im Prinzip wie beim Amazon Einkauswagen. Wenn Du die Auswahl dann für Deine Site haben möchtest, mußt Du nur auf “Use” am rechten oberen Rand in dem grauen Kasten klicken.
  • Auf der dann folgenden Seite kannst Du noch festlegen, welches Set Du haben möchtest. Außerdem bietet Google Dir dort auch gleich Folgendes an:
    • einen Link, der in den Head-Bereich Deiner Site gehört (- dort wo die ganzen Meta Tags hinkommen…) – einfach mit copy & paste dort einfügen.
    • Google zeigt Dir auch gleich anhand eines Beispiels, wie Du dann die Schriftart im Stylesheet verwendest. Das geht eigentlich wie bei allen Schriftarten mit “font-family”. Du brauchst nur den Namen Deiner Schriftart und den kannst Du Dir auch gleich aus der Google Seite rauskopieren.

Das war’s! Schon kannst Du die coolen Schriften da verwenden! Ganz einfach!

Design by Uta Kaemper