yellowled.de

Dieser Artikel ist archiviert. Er wurde am in YellowLeds Weblog v2 veröffentlicht. Der Inhalt ist inzwischen wahrscheinlich veraltet. Kommentare und Trackbacks wurden entfernt. – Zur Archivübersicht

Selbst gehostete Webfonts in Serendipity

Dirk fragte heute, ob man Webfonts selbst hosten könne und ob ich wisse, wie das geht. Kann man natürlich, weiß ich auch, aber da muss ich ein bisschen weiter ausholen. Und weil wir schon mal dabei sind, mache ich es dann auch gleich spezifisch für Serendipity-Themes.

Warum sollte man das überhaupt wollen?

s9y-Themes wie 2k11 oder Next bieten die Möglichkeit, über die Theme-Optionen einen Webfont einzubinden und zu nutzen, normalerweise über Google Fonts. Nun stört sich manch Einer vielleicht daran, Google-Dienste zu nutzen, daher die Frage, ob man Webfonts auch selbst hosten kann – man kann, sofern es die Lizenz des Fonts erlaubt. Das gilt durchaus auf für Fonts, die man käuflich erworben hat – es muss ausdrücklich erlaubt sein, die Fonts selbst zu hosten!

Zum Teil erlauben sich Webfont-Anbieter sogar dann noch, dem Benutzer vorzuschreiben, wie er die Webfonts einzubinden hat. Ich weiß nicht, inwiefern das lizenzrechtlich tatsächlich zulässig ist, aber frei und kostenlos nutzbare Fonts sind da ohnehin meist weniger restriktiv.

Komm doch mal zum Punkt: Wie geht das denn nun?

Ich erkläre das mal anhand der beliebten Open Sans. Um den Font selbst zu hosten, muss man die Font-Dateien natürlich downloaden – das geht (sehr umständlich) bei Google Fonts oder (viel einfacher) z.B. bei Font Squirrel. Letzteres ist insbesondere deshalb empfehlenswert, weil man dort ein „Webfont-Kit“ herunterladen kann. In diesem Zipfile findet man:

Machen wir es uns doch einfach und erstellen uns ein angepasstes Webfont-Kit mit dem Generator von Font Squirrel. Dazu laden wir die Schnitte, die wir wirklich brauchen (normalerweise Regular, Bold, Italic und Bold Italtic), hoch – im Fall von Open Sans als TrueType-Font (.ttf). Es empfiehlt sich aus meiner Sicht, den „Expert Mode“ auszuwählen, der ein paar sehr angenehme Anpassungen erlaubt. Wir haken dort folgende Optionen an und lassen alles andere :

Aus dem resultierenden Zipfile kopieren wir alle Font-Dateien in ein Verzeichnis fonts (der Ordnung halber) in unserem Theme-Verzeichnis, um dann folgendes CSS am Anfang des Theme-Stylesheets style.css einzufügen (angepasst aus der stylesheet.css im Zipfile):

@font-face {
    font-family: "open_sans";
    src: url("{TEMPLATE_PATH}fonts/opensans-bold-webfont.woff2") format("woff2"),
        url("{TEMPLATE_PATH}fonts/opensans-bold-webfont.woff") format("woff"),
        url("{TEMPLATE_PATH}fonts/opensans-bold-webfont.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "open_sans";
    src: url("{TEMPLATE_PATH}fonts/opensans-bolditalic-webfont.woff2") format("woff2"),
        url("{TEMPLATE_PATH}fonts/opensans-bolditalic-webfont.woff") format("woff"),
        url("{TEMPLATE_PATH}fonts/opensans-bolditalic-webfont.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "open_sans";
    src: url("{TEMPLATE_PATH}fonts/opensans-italic-webfont.woff2") format("woff2"),
        url("{TEMPLATE_PATH}fonts/opensans-italic-webfont.woff") format("woff"),
        url("{TEMPLATE_PATH}fonts/opensans-italic-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "open_sans";
    src: url("{TEMPLATE_PATH}fonts/opensans-regular-webfont.woff2") format("woff2"),
        url("{TEMPLATE_PATH}fonts/opensans-regular-webfont.woff") format("woff"),
        url("{TEMPLATE_PATH}fonts/opensans-regular-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

Anmerkungen

  1. Die Variable {TEMPLATE_PATH} funktioniert nur in Serendipity-Themes und nur in Stylesheets, die zum dynamisch erzeugten Stylesheet in s9y hinzugefügt werden.
  2. Das Ganze sollte unbedingt möglichst früh im Theme-Stylesheet stehen, damit diese Schriftarten möglichst früh geladen werden (und wenn man es ganz richtig machen will, gibt es dabei noch viele weitere Stellschrauben).
  3. Ich bevorzuge diese „Gruppierung“ zu einer Schriftfamilie (open_sans), aber das muss man nicht so machen; es mag Situationen geben, in denen es wünschenswert ist, jeden Schriftschnitt als separate font-family setzen zu können.
  4. Die Schriftformate TTF, WOFF und WOFF2 decken eigentlich alle Browser ab, die man heutzutage noch unterstützen will (tatsächlich ist die Unterstützung für WOFF2 noch ein bisschen mau); mehr braucht man heute eigentlich nicht mehr.

Nun kann man die Schrift im Theme verwenden, z.B. so:

html {
    font-family: "open_sans", sans-serif;
}

s9y-spezifische Anmerkungen

  1. Wenn man das so macht, sollte man ggf. themeseitige Webfonts in den Theme-Optionen abschalten; insbesondere, wenn diese nicht genutzt werden. Webfonts sind ein Performance-Problem, insbesondere auf mobilen Internetverbindungen.
  2. Es ist nicht empfehlenswert (wenngleich technisch möglich), das Webfont-CSS in die user.css einzufügen, weil diese sehr spät in das dynamisch erzeugte Stylesheet eingebunden wird. Die Webfonts sind damit zwar updatesicher in ansonsten unmodifizierte Themes einzubinden, würden aber sehr wahrscheinlich einen sogenannten “Flash of unstyled text” erzeugen, also ein wahrnehmbares „Umschalten“ zum Webfont.

Ich hoffe, das war halbwegs verständlich (ansonsten bitte gerne fragen!); es ist ein sehr komplexes Thema, bei dem man viele Dinge beachten muss. Ganz wichtig ist mir noch: Abgesehen von der „politischen“ Komponente, keine Google-Dienste nutzen zu wollen, ist es kein Nachteil, Google-Fonts einzubinden; bei beliebten Schriften (wie Open Sans) ist es sogar ein Vorteil, weil die Wahrscheinlichkeit hoch ist, dass Seitenbesucher diese Schrift bereits im Browsercache oder gar lokal installiert haben. Aber es gibt natürlich sogar Schriften, die man selbst hosten muss, weil sie nicht auf Google Fonts verfügbar sind; z.B. die Calendas plus, die hier im Blog zum Einsatz kommt.