Websichere Schriftarten

Es gibt sehr viele Fonts, für die man sich entscheiden kann. Hat man sich erst einmal entschieden, muss die Schriftart eingebunden werden. Um eben diese Fonts benutzen zu können, gibt es unterschiedliche Herangehensweisen. Dazu später mehr.

Als websichere Schriften bezeichnet man Jene, die ohne irgendeinen Aufwand für den Nutzer, schon auf dem Rechner vorinstalliert sind und als Bestandteil mit dem jeweiligen OS ausgeliefert werden.

Folgende Fonts sind websicher:

  • Arial
  • Times New Roman
  • Verdana
  • Trebuchet MS
  • Georgia
  • Lucida Grande bzw. Lucida Sans
  • Comic Sans
  • Courier und Courier New
  • C-Schriften

Diese sogenannten Fonts sind jedoch in Zeiten der immensen Nutzung von mobilen Browsern nicht mehr so ‚sicher‘ wie für den Desktop bisher. Grund sind natürlich iOS und vor allem Android. Diese haben zum Teil unterschiedliche Zusammenstellungen von vorinstallierten Schriften. Android hat gar keine der üblichen und bekannten websicheren Fonts vorinstalliert. Obwohl mit Android der Ausdruck websichere Fonts nicht allumfassend für sämtliche OS gilt, kann man dennoch von den hier aufgeführten Schriftarten von websicher sprechen.

(siehe dazu Websichere Schriften)

Welche Fonts sind tatsächlich schon da?

Cool wäre es natürlich, wenn man das Device, von dem aus der Request an die Webseite gefeuert wurde, fragen könnte, welche Schriftarten denn verfügbar sind. Das geht leider nicht 😢.

Viele Windows-Clients haben noch nicht einmal mehr MsOffice installiert. Dennoch ist die Liste der vorhandenen Schriften unter Windows lang. Für die -User gibt es ebenfalls eine Liste .

The Hyatt-Way with @font-facing

Der Entwickler Dave Hyatt und sein Team waren bei  für den Browser Safari zuständig. D. Hyatt kam auf die Idee, das Standardformat Open Type für Webfonts zu nutzen und über CSS implementierbar zu machen. Das regte natürlich die Nachfrage für den Einsatz von unterschiedlichsten Fonts im Web enorm an. Gegenwärtig kann man mit einer Kombination unterschiedlichster Formate in fast allen Browsern beliebige Schriften verwenden.

Das Implementieren einer Schriftart mit @font-face ist schnell verstanden. Zuerst benennt man die Schrift und anschließend gibt man mittels src den Speicherort der Font-Datei an.

Für die Formatangabe sind folgende Werte erlaubt:

  • eot bzw. embedded-opentype ist eine Schriftart im Format Embedded Open Typ
  • woff ist eine Schriftart im Format Web Open Font Format
  • woff2 ist eine Schriftart im Format Web Open Font Format 2
  • truetype ist eine Schriftart im Format True Type
  • opentype ist eine Schriftart im Format Open Type
  • svg eine Schriftart im Format Scalable Vector Graphic

Beispielcode für das Einbetten einer Schriftart:

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

Quellen

Bünyamin Tunc

Sunday, Sep 27, 2020