Web Fonts ersetzen und innerhalb des eigenen Webspaces ablegen

Eine Webseite wird geprägt durch Design und Content. Nur wenn das Design einer Webseite ansprechend wirkt und der Content einen Mehrwert bietet, werden potentielle User nicht innerhalb von Sekunden vergrault. Das Design wiederum wird beeinflusst von den verwendeten Fonts. Doch das war nicht immer so, zumindest nicht in den Anfangsjahren, als die Schriftarten nur vom User im Browser eingestellt werden konnten. Zumindest steht es so geschrieben, auch dass erst im Jahre 1995 von Netscape ein Font-Tag für HTML-Seiten eingeführt wurde.

Seither blieb die Entwicklung jedoch nicht stehen. Heute ist es bereits beinahe als normal anzusehen, dass für die Gestaltung von Webseiten nicht nur die auf den meisten Endgeräten vorhandenen Schriftarten verwendet werden, sondern Webfonts, die wesentlich mehr Gestaltungsmöglichkeiten bieten. Für Webfonts gibt es unterschiedliche Anbieter, der bekannteste Anbieter ist und bleibt in diesem Teil der Welt wohl Google.

Google Web Fonts sind beliebt, nicht zuletzt wegen ihrer Ausgereiftheit. Außerdem ermöglicht die Google Fonts API einen einfachen Zugriff auf die ausgewählten Fonts, so dass die Schnittstelle von Designern wie von privaten Webmastern gern genutzt wird. Die Kehrseite ist jedoch, dass kaum jemand weiß, welche Daten bei der Auslieferung der Fonts von einem entfernten Server erfasst werden und wie mit diesen Daten verfahren wird.

Ein kleiner Hinweis für Leser, die sich bisher weniger mit Webprotokollen auskennen. Fordert ein Browser eine im Quelltext einer HTML-Seite referenzierte Ressource an, stellt dieser Browser sich bei der Gegenseite vor. Zu den im HTTP-Header übermittelten Angaben gehört bei dieser Vorstellung unter anderem ein User Agent, welcher Einzelheiten über die verwendete Browser-Version enthält. An diesem Prinzip gibt es eigentlich nicht das Geringste auszusetzen, da es dem Hypertext-Übertragungsprotokoll (Kurzform: HTTP) entspricht. Nur wie mit den übertragenen und empfangenen Daten verfahren wird, ist nicht einheitlich geregelt.

Wer von Anfang an einschränken möchte, dass Nutzerdaten erfasst und ohne Einverständnis ausgewertet werden können, dem steht es hingegen frei, Fonts innerhalb des eigenen Webspaces abzulegen. Bei der weit verbreiteten Font-Family ‘Open Sans’ erwies sich diese Vorgehensweise als möglich, da Open Sans nicht nur von Google Web Fonts ausgeliefert wird, sondern die Schriftart ebenfalls bei Font Squirrel erhältlich ist. Nachfolgend einige Schritte, wie Sie vorgehen können, um Open Sans als Font innerhalb des eigenen Webspaces abzulegen, wobei sich diese kleine Anleitung auf ein neueres WordPress Theme wie Twenty Twelve bezieht.

Kleine Anleitung

Zuerst sollte Sie sich die Schriftart von Font Squirrel herunterladen, wobei wir das komplette Webfont Kit auswählten: Font Squirrel (als Webfont Kit)

Aus diesem Webfont-Kit wählten wir wiederum folgende Dateien aus und speicherten diese in ein neu angelegtes Font-Verzeichnis innerhalb des Webspaces ab.

/* normal */

OpenSans-Regular-webfont.eot
OpenSans-Regular-webfont.ttf
OpenSans-Regular-webfont.woff

/* bold */

OpenSans-Bold-webfont.eot
OpenSans-Bold-webfont.ttf
OpenSans-Bold-webfont.woff

/* normal italic */

OpenSans-Italic-webfont.eot
OpenSans-Italic-webfont.ttf
OpenSans-Italic-webfont.woff

/* bold italic */

OpenSans-BoldItalic-webfont.eot
OpenSans-BoldItalic-webfont.ttf
OpenSans-BoldItalic-webfont.woff

Weiterhin legten wir in dem neu angelegten Font-Verzeichnis eine CSS-Datei ab, welche die erforderlichen Stylesheet-Angaben enthält. Beim Entwurf für die CSS Datei können Sie sich an ein Beispiel halten, welches dem Webfont-Kit als HTML-Datei anbei liegt. Im Kompatibilitätsmodus vom IE 10 konnte mit diesem Beispiel jedoch kein befriedigendes Ergebnis erzielt werden. Ob es am Beispiel liegt oder an einen Tippfehler unsererseits, könnte nur durch erneuter Tests festgestellt werden. Da jedoch das nachfolgende CSS-Listing wie erwartet funktionierte, verzichteten wir bisher darauf.

Einzelheiten: Mit der jeweils ersten CSS- font-face-Klasse wird der IE im Kompatibilitätsmodus bedient, mit den restlichen font-face-Klassen hoffentlich die meisten anderen Browser. Mit local wird abgefragt, ob die Schriftart möglicherweise bereits auf den Computer des Nutzers installiert ist. Getestet wurde die CSS Datei einschließlich der Fonts mit den Browsern Firefox 22, IE 10 und Chrome 28, weiterhin mit dem ‘Opera Mobile Emulator’. Der Test wurde mit der WordPress-Version 3.5.2 und 3.6 und dem Theme Twenty Twelve durchgeführt.

/* normal */
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 400;
  src: url('http://www.example.com/fonts/OpenSans-Regular-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'),
       url('http://www.example.com/fonts/OpenSans-Regular-webfont.eot')  format('eot'),
       url('http://www.example.com/fonts/OpenSans-Regular-webfont.ttf')  format('truetype'),  
       url('http://www.example.com/fonts/OpenSans-Regular-webfont.woff') format('woff');
}
/* bold */
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 700;
  src: url('http://www.example.com/fonts/OpenSans-Bold-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('http://www.example.com/fonts/OpenSans-Bold-webfont.eot')  format('eot'),
       url('http://www.example.com/fonts/OpenSans-Bold-webfont.ttf')  format('truetype'),  
       url('http://www.example.com/fonts/OpenSans-Bold-webfont.woff') format('woff');
}
/* normal italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('http://www.example.com/fonts/OpenSans-Italic-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('http://www.example.com/fonts/OpenSans-Italic-webfont.eot')  format('eot'),
       url('http://www.example.com/fonts/OpenSans-Italic-webfont.ttf')  format('truetype'),  
       url('http://www.example.com/fonts/OpenSans-Italic-webfont.woff') format('woff');
}
/* bold italic */
@font-face {
  font-family:'Open Sans';
  font-style:  italic;
  font-weight: 700;
  src: url('http://www.example.com/fonts/OpenSans-BoldItalic-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), 
       url('http://www.example.com/fonts/OpenSans-BoldItalic-webfont.eot')  format('eot'),
       url('http://www.example.com/fonts/OpenSans-BoldItalic-webfont.ttf')  format('truetype'),  
       url('http://www.example.com/fonts/OpenSans-BoldItalic-webfont.woff') format('woff');
}

In einem letzten Schritt muss nun nur noch der Link zur Stylesheet geändert werden. Diese Änderung erfolgt in der functions.php des Theme. Dabei wurden die Parameter-Werte-Paare im Array nur auskommentiert, so dass eine spätere Änderung jederzeit wieder möglich sein sollte und die Adresse der Google API durch die eigene URL ersetzt.

$query_args = array(
    //'family' => 'Open+Sans:400italic,700italic,400,700',
    //'subset' => $subsets,
);
$font_url = add_query_arg( $query_args, "$protocol://www.example.com/fonts/styles.css" );

Einen Link zum Anbieter und zur Apache Lizenz Version 2.0 sowie den Namen des Autors (des Fonts) finden Sie im Impressum dieser Webwebsite unter dem Stichpunkt Hinweise zum Copyright und Urheberrecht.

4 Gedanken zu „Web Fonts ersetzen und innerhalb des eigenen Webspaces ablegen

  1. Martin

    Danke für die Anleitung. Da mir Datenschutz wichtig ist, war ich schockiert als ich feststellte, dass das Theme eine Verbindung zu Google aufbaut. Ich verstehe auch nicht, warum das Theme die Schrift einfach nicht direkt mitliefert wenn sie schon unter eine Apache-Lizenz verfügbar ist.
    Nun wird die Schrift von meinem eigenen Webspace geladen und keine Verbindung mehr zu Google aufgebaut.
    Ich habe lediglich den Link zur CSS-Datei im Theme geändert, die Parameter habe ich nicht auskommentiert. Trotzdem funktioniert alles Bestens. Ich vermute das Auskommentieren ist nur nötig, wenn man eine andere Schrift verwendet und dieser direkt im CSS andere Parameter zuordnen möchte.

    Gruß
    Martin

    Antworten
  2. Alexander

    Hallo, interessant. Wie tauscht man denn den Font aus, wenn dieser nicht in der function.php sondern in der header.php des Themes steht? Zum Beispiel:

    Antworten
  3. Christoph

    Es scheint mir nicht so einfach zu sein, ein Webfontkit für OpenSans von der FontSquirrel Site herunterzuladen.
    Dort lese ich (wenn ich auf WebFontKit gehe):

    _Webfont Kit

    The license for this font is the SIL OFL license. This license does not allow us to redistribute derivative versions of the font without wholesale name changes inside and out of the font. Until we figure out a reasonable method of delivering these to you and complying with the license, you will have to use the Webfont Generator yourself on these, renaming the fonts appropriately._

    Wie bekomme ich also nun die .eot und .woff Dateien?

    Grüße
    Christoph

    Antworten
    1. Melewo Artikelautor

      Als ich den heruntergeladen habe, stand der Font noch unter einer Apache Lizenz. Macht aber nichts, wie es ausschaut, die SIL OFL license ist ebenfalls eine freie Lizenz, Du darfst den Font nur nicht umbenennen, um den unter eigenen Namen zu verkaufen, auch nicht eine abgeleitete Version davon. Also benutzen ja, verkaufen nein, Irrtum meinerseits vorbehalten. Doch wenn Du einmal in der Wikipedia nach dieser Lizenz suchst, ist das eigentlich gut und verständlich erklärt.

      Antworten

Hinterlasse einen Kommentar zu Christoph Antworten abbrechen

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