@font-face und Probleme mit dem Internet Explorer 11

Eines unserer letzten Schritte kurz vor der Onlinestellung einer neuen Website ist die Überprüfung der Browser-Kompatibilität. Wenn man für den Internet Explorer 11 optimiert, entdeckt man immer wieder mal einen neuen Bug und v.a. die Grenzen des Browsers. Der Internet Explorer 11 ist zwar schon sehr veraltet, wird aber immer noch zum Browsen von Websites verwendet. Deswegen versuchen wir unsere Websites ebenfalls für den IE11 optimal darstellbar und benutzbar zu machen.

Mittlerweile verwendet so ziemlich jede neue Website eine Schriftart die nicht standardmäßig auf dem Gerät des Users installiert wurde und somit tauchen auch Probleme bei der Darstellung im Internet Explorer 11 auf.

Eine Schriftart kann man mit der CSS Regel @font-face in eine Website einbetten. Somit muss der User diese Schriftart nicht auf seinem Rechner installiert haben. Grundsätzlich kann der IE11 auch mit dieser CSS Regel umgehen – allerdings gibt es ein paar mögliche Hindernisse die der Browser nicht überwinden kann. Die gewünschte Schriftart wird dann nicht dargestellt und eine Standardschrift wie z.B. „Times New Roman“ oder „Arial“ wird angezeigt.

Wir haben folgend einige Lösungsmöglichkeiten aus der Praxis gesammelt und hoffen, dass eine Lösung davon weiterhilft, falls man damit mal konfrontiert wird.

Lösungsmöglichkeit #1: Entfernen des woff2 Font

In einem Projekt eines Kunden war folgende CSS Regel deklariert:

@font-face {
   font-family: "Fontname";
   src: url('../pathToFonts/font.woff2') format('woff2'), url('../pathToFonts/font.woff') format('woff');
}

Durch das Entfernen des woff-2 Eintrags in einer separaten CSS Datei für den Internet Explorer 11 wurde das Problem gelöst:

@font-face {
   font-family: "Fontname";
   src: url('../pathToFonts/font.woff') format('woff');
}

Lösungsmöglichkeit #2: Maximale Kompatibilität

Man kann für unterschiedliche Browser / Geräte ein anderes Format der Schriftart bereitstellen, dazu verwendet man folgenden Code:

@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot'); /* IE9 Compat Modes */
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
   url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
   url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
   url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Vielen Dank an CSS Tricks von dem dieser Codeschnipsel ursprünglich stammt.

Lösungsmöglichkeit #3: Einbindbarkeit von Schriften

Wenn man sich die Eigenschaften von z.B. einer .ttf Font Datei genauer ansieht, dann findet man dort das Attribut „Einbindbarkeit von Schriftarten“. Hierzu macht man einen Rechtsklick auf die Datei -> Klick auf „Eigenschaften“  und auf den Reiter „Details“.

Es gibt 4 mögliche Berechtigungen die in diesem Feld stehen können:

Installierbar - Erlaubt die Einbettung von Schriften in das Dokument und die permanente Installation auf dem Computer.

Bearbeitbar - Ermöglicht die Einbettung von Schriften in das Dokument, installiert die Schriften jedoch nur vorübergehend im System.

Nur Drucken und Vorschau - Erlaubt die Einbettung von Schriften in das Dokument, installiert die Schriften jedoch nur vorübergehend im System für Druckzwecke.

Eingeschränkt - Schriftarten können nicht in ein Dokument eingebettet werden.

Sollte das Attribut „Einbindbarkeit von Schriften“ mit „Eingeschränkt“ gekennzeichnet sein, dann wird die Schriftart nicht eingebettet und nicht angezeigt.

Lösungsmöglichkeit #4: Sicherheitseinstellungen im Internet Explorer

Hierzu gab es einen Bug Report #1197679 der auf der Microsoft Seite leider nicht mehr erreichbar ist. Es gab eine Version vom Internet Explorer 11 die den Download von Fonts deaktiviert hatte. Um externe Schriftarten einbetten zu können musste man in den Internetoptionen den Download aktivieren:

  1. Öffnen Sie den Internet Explorer
  2. Klicken Sie auf das Zahnrad oben rechts
  3. Klicken Sie auf „Internetoptionen“
  4. Wechseln Sie auf den Reiter „Sicherheit“
  5. Im Abschnitt „Sicherheitsstufe für diese Zone“ klicken Sie auf „Stufe anpassen…“
  6. Das Fenster „Sicherheitseinstellungen - Internetzone“ öffnet sich
  7. Scrollen Sie bis zum Punkt „Downloads“ -> „Schriftartendownload“
  8. Wählen Sie die Option „Aktivieren“ und bestätigen Sie das Fenster mit „OK“

Konnten wir Ihnen helfen?

Hat der Beitrag Ihnen weitergeholfen?
Wir würden uns auf Ihr Feedback freuen!

Feedback senden