Wie einige von euch vielleicht mitbekommen haben, hab ich die letzten Tage ziemlich am Design geschraubt. Heißt, im Prinzip ist alles neu. Einer der Neuigkeiten ist, dass von nun an die in Ubuntu 10.10. eingeführte Schriftart ubuntu-font-family verwendet wird.

Da außer Ubuntu in der neuesten Version, kein anderes Betriebssystem die Schriftart von Natur aus beherrscht, muss ein wenig Extra-Arbeit geleistet werden. Ist eine Schriftart auf dem System vorhanden, so reicht es wie immer die Schriftart mittels CSS festzulegen.

Anzeige

font-family: Ubuntu;

Da aber, wie bereits angesprochen, nur Ubuntu diese Schriftart von Haus aus mitbringt, muss man entweder Ausweich-Schriftarten festlegen und/oder die Schriftart beim Aufruf der Seite auf den Computer des Nutzers bringen. Dazu gibt es mehrere Möglichkeiten.

Einfach, aber teuer

Eine Möglichkeit ist es die Schriftart, die im .ttf-Format vorliegt, beim ersten Seitenaufruf auf den Benutzer-Computer zu laden. Dies sollte man am Anfang der CSS-Datei wie folgt befehlen.

@font-face { 
    font-family: Ubuntu;
    src: url(ubuntu.ttf);
    }

Das Problem bei dieser Methode: Sie kostet jede Menge Traffic. Ist die .ttf-Datei zum Beispiel 400 KB groß und auf die Seite kommen täglich 1.000 Benutzer, so werden täglich zusätzlich 400 MB an Traffic erzeugt. Das ist eine ganze Menge. Die Methode kann also eher auf sehr kleinen Seiten, mit wenigen Besuchern angewandt werden.

Die Schriftart liegt als .woff vor

Das Web Open Font Format ist ein Container-Format für Schriftarten, indem die „normalen“ Schriftdateien (z.B. .ttf) in komprimierter Form vorlegen. Der Nachteil des viel größeren Traffic-Verbrauchs wird damit also ausgemerzt. Allerdings unterstützen bisweilen noch nicht alle wichtigen Browser das Dateiformat. Außerdem muss man die Schriftart auch im .woff zur Verfügung haben. Wie man sich selbst so ein Pakte schnüren kann, hab ich leider noch nicht herausfinden können. (Update: Habs jetzt rausgefunden und gleich einen Artikel darüber verfasst.)

Google

Ja genau, Google. Google hat wie so oft eine Antwort auf ein Problem. Mit einem kurzen Code-Stück ist es möglich, dem Browser zu befehlen, dass er sich die Schriftart herunterlädt. Nicht aber wie im ersten Fall von meinem Server, sondern von einem Google-Server.

Auf google.com/webfonts kann man sich einen Code generieren lassen, den man dann im <head>-Tag der Homepage einbinden muss. In meinem Fall sieht der Code wie folgt aus:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold' 
rel='stylesheet' type='text/css'>

Je nachdem welche Schriftart man verwenden will, ändert sich natürlich der Code. Man sollte auch festlegen, ob nur die normale Schriftart verwendet werden soll oder ob man zum Beispiel auch die Zeichen für „fett“, „kursiv“ sowie „fett+kursiv“ benötigt. In meinem Fall werden die Dateien für „fett“ und „normal“ heruntergeladen, da ich kursiv eher selten verwende und so weniger Traffic beim Benutzer (und bei Google) generiert wird.

Fehlt zum Beispiel die Schriftdatei für das „fette“ Schriftbild, so verbreitert der Browser die Schriftart von selbst. Allerdings sieht die Schrift nachher meist nicht so schön aus, als wenn man das richtige Schriftbild verwendet.

Anzeige


23 Kommentare

  1. Vielen Dank für Deinen Artikel. Ich finde ihn sehr interessant und hilfreich. Muss ich bald mal ausprobieren.

  2. Tjaja, Tange Google. Oft verflucht, oft geliebt. Eigentlich ist es ja nicht schlecht, was die so machen. Zumindest nicht alles.

  3. Ich denke ohne Google wäre das Internet nicht auf dem Stand, auf dem es heute ist.

  4. Das habe ich vor ein paar Tagen auch auf meinem kleinen Blog http://dendemeier.de gemacht 🙂

  5. Eine weitere Möglichkeit wäre noch cufon zu verwenden, um das ganze mit JavaScript zu realisieren. Hat den Vorteil, dass man zusätzlich noch ne Menge Effekte für die Schriften verwenden kann und das ganze mit so ziemlich allen Browsern funktioniert.

  6. Mosche! Wie viel KB wird denn nun in der Google-Lösung übertragen? Passiert das automatisch oder muss man dazu JS aktiviert haben?
    Mir fallen dabei nämlich Smartphone-Besitzer ein, die nur einen kleinen Datentarif nutzen oder aber Schmalband-Nutzer. Ich jedenfalls würde mich nicht freuen, wenn ich, nutzte ich sowas, mit meinem Androiden und einem nur kleinen Datentarif erstmal diverse KB herunterladen müsste, nur um eine andere Schrift sehen zu können.
    Liebe Grüße, Flo

  7. Hallo!

    Das wär natürlich interessant zu wissen. Ich werde das mal ausprobieren. Eventuell müsste man vielleicht vorher den Browser detektieren und nur bei Desktop-Browsern den Code ausführen.

    Werde darüber was schreiben.

    Gruß

  8. Die dritte Lösung ist für den Serverbetreiber vielleicht elegant. Für den User fällt der lästige Traffic allerdings trotzdem an.
    Außerdem bin ich der Meinung, dass der Webdesigner keinen Einfluss auf die gewählte Schrftart nehmen sollte. Mir ist beispielsweise die Schrift meist zu klein und ich habe daher alle Schrifteinstellungen fest definiert.

  9. Eine empfehlenswerte und einfache Möglichkeit ist der @Font-Face-Online-Generator; er kann nicht nur alle relevanten Schriftformate (woff, eot für alte IE’s, …) erzeugen, ſondern auch die Größe reduzieren (indem die ›exotiſchen‹ Glyphen entfernt werden) – und daſs CSS wird auch mit ausgeſpuckt :).

    Wer lieber lokal arbeiten/konvertieren will, ſollte ſich einmal FontForge anſehen – die GUI wirkt archaiſch, aber dieſes Programm ist einfach das Schweizer Meſſer für Schriftbearbeiung unter GNU/Linux :o).
    http://fontforge.sourceforge.net/

  10. Hey, vielen Dank für die Info. Werde das gelegendlich mal ausprobieren und falls das mit dem woff ordentlich klappt, vielleicht darauf umstellen. Möglicherweise wird woff ja zum w3c-Standard bzw. ist auf dem Weg dahin.

  11. Pingback: Das .woff-Format für eigene Homepage-Schriftarten nutzen | picomol.de

  12. Bezüglich der Bedenken von Schmalband/Smartphone-Benutzern: Ist es nicht so, dass die Schriftart nur ein einziges Mal heruntergeladen wird und danach im (Browser)Cache verbleibt? Dann fällt der Traffic ja nur sehr selten an, sodass ich darin nicht wirklich ein Problem sehe. Der erste Aufruf kann dan unter Umständen ein wenig länger dauern, aber bei weiteren Aufrufen sollten die Verzögerungen nicht mehr auftreten.

  13. Ich habs mit dem Opera Mini-Browser probiert. Der geht sehr sparsam um und lädt die Schriftart gar nicht erst runter.

  14. hallo, dein code ist nicht ganz vollständig, oder? ich nutze wordpress, wo muss dieser code dann da eingefügt werden, also in welcher datei?

  15. Du hast recht. Irgendetwas ist das schiefgelaufen. Jetzt sollte es aber passen.

  16. Du musst die Zeile in den -Bereich deiner Homepage einbinden. Anschließend musst du in der CSS-Datei für die jeweils gewünschten Elemente die Schriftart festlegen mit dem Befehl „font-family: Ubuntu;“.

  17. und wo muss man das einfügen, wenn man wordpress nutzt?

  18. Danek 🙂 Genau das was ich gesucht habe 😛

  19. „Bereich deiner Homepage“ Wo finde ich diesen Bereich?

  20. In den head-Bereich. Sorry, das head wurde von WordPress verschluckt 😉

  21. welche datei bzw. css-datei ist das denn?

  22. Das müsste die header-Datei deines WordPress-Themes sein. Dort innerhalb der head-Tags einfügen und die entsprechende Schriftart via CSS den Klassen oder IDs zuweisen.

    Gruß Valentin

  23. Hallo,
    die Aussage „Allerdings unterstützen bisweilen noch nicht alle wichtigen Browser das Dateiformat.“ bei WOFF ist nicht richtig bezogen auf dem Absatz dahinter zu Google, dass die Lösung bei Google zu finden sei, dort ist das nämlich ebenfalls eine WOFF 😉

    in der CSS von Google steht das:
    https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert