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.