It’s #FrontendFriday – Font Implementierung mit @font-face

Eine Font – Unterschiedliche Dateien

Nicht nur in Dokumenten (wie Word oder PDFs) nutzen wir unterschiedliche Fonts, sondern auch in unseren Webanwendungen. Hierbei müssen spezielle Webfonts genutzt werden [1]. Das Problem hierbei ist, dass wir eine Menge an einzelnen Webfont-Dateien benötigen. Webfonts stehen in unterschiedlichen Formaten, wie zum Beispiel .eot, .woff, .woff2, .ttf, und .svg, zur Verfügung. Damit hätten wir für eine Font schon fünf verschiedene einzelne Dateien.

Nutzen wir in der Webanwendung verschiedene Schrift Stärken (mit font-weight), benötigen wir für jede dieser Schrift Stärken einzelne Webfont-Dateien (in den unterschiedlichen Formaten). Das ist wichtig, da sonst der Browser selbständig die Formatierung der Stärken übernimmt und somit ein verfälschtes Ergebnis liefert [2].

Dasselbe gilt, wenn wir italic und bold für unsere Webanwendung nutzen. Hierfür benötigen wir (für jede Schrift Stärke) eigene Webfont-Dateien in den unterschiedlichen Formaten [3].

Falls unser Projekt nun zwei verschiedene Font Stärken braucht, benötigen wir schon zehn unterschiedliche Webfont-Dateien. Nehmen wir noch italic und bold dazu, kommen wir sogar auf 30. Eine Menge an Dateien, die man mit Hilfe von @font-face in nur wenigen Zeilen Code implementieren kann.

@font-face – Ein CSS Statement mit vielen Funktionen

Der Einsatz von @font-face gehört heutzutage schon zum Standard [4]. Man kann damit die unterschiedlichen Webfont-Dateien in das Projekt integrieren und unterscheiden.

Im folgendem Beispiel wird eine Font mit allen Webfont-Dateien im CSS eingepflegt:

@font-face {
  font-family: 'MyFont';
  font-weight: normal;
  src: url('./fonts/MyFont-Regular.eot');
  url('./fonts/MyFont-Regular.eot?#iefix') format('embedded-opentype'),
  url('./fonts/MyFont-Regular.woff2') format('woff2'),
  url('./fonts/MyFont-Regular.woff') format('woff'),
  url('./fonts/MyFont-Regular.ttf') format('truetype'),
  url('./fonts/MyFont-Regular.svg) format('svg');
}

Benötigen wir in unserem Projekt noch bold (auch für <b> und <strong>), fügen wir einfach noch ein weiteres @font-face in unser CSS ein:

@font-face {
  font-family: 'MyFont';
  font-weight: bold;
  src: url('./fonts/MyFont-Bold.eot');
  url('./fonts/MyFont-Bold.eot?#iefix') format('embedded-opentype'),
  url('./fonts/MyFont-Bold.woff2') format('woff2'),
  url('./fonts/MyFont-Bold.woff') format('woff'),
  url('./fonts/MyFont-Bold.ttf') format('truetype'),
  url('./fonts/MyFont-Bold.svg) format('svg');
}

Vergleichen wir die beiden Beispiele, sehen wir, dass die implementierte Font unterschiedlich ist und font-weight: bold  hinzugefügt wurde. Die font-family bleibt aber gleich. Das bietet uns den großen Vorteil, dass @font-face nun automatisch die bold Font auswählt, wenn wir das Attribut <b> oder <strong> in unserer Webanwendung verwenden. Das gilt auch, wenn wir im CSS den Wert font-weight: bold setzen.

Für italic, bold-italic oder für verschiedene Font Stärken können wir dasselbe Prinzip nutzen. @font-face kümmert sich dann um die richtige Zuordnung.

Webfonts sind Bestandteil jeder Webanwendung. Nutzt man alle Möglichkeiten von @font-face, kann man sich eine Menge Arbeit bei der Verwaltung der Webfonts sparen und garantiert, dass Tags wie <strong> oder <em> immer die richtige Font nutzen, ohne dass man sich darüber im Nachhinein Gedanken darüber machen muss.

Mehr über Frontend Entwicklung erfahren

Quellen