Webfonts und Systemschriften

Aus induux Wiki
Letzter Editor

induux international
aktualisiert am 30.01.2020 - 14:40:02
Angebot
Anzeige
Web_Fonts

Webfont bedeutet ins deutsche übersetzt "Netzschrift" und bezeichnet auf HTML-basierende Fonts (Schriften), die von Webbrowsern dargestellt werden. Web Fonts werden nicht aus der lokalen Sammlung eines Computers geladen, sondern von einem externen Webserver in den jeweiligen Browser eingeladen. Sie sind somit das Gegenteil von Systemschriften.

Frage/Definition: Was ist/sind Web Fonts?



Webfonts im SEO

Texte auf der Website werden durch Schriften dargestellt. Es kann unterschieden werden, ob eine Systemschrift für die Website verwendet wird oder ein Webfont. Systemschriften sind natürlich begrenzt. Webfonts hingegen werden im Web von Font Foundries, Schriftportalen (Google Fonts) oder von Schriftgestaltern als Download bereitgestellt. Hier ist die Auswahl natürlich größer. Da Webfonts von einem Server geladen werden verursacht das einen zusätzlichen Datentransfer, der die Ladezeit der Webseite verlangsamt. Ein weiterer Grund, warum Webfonts für SEO nicht optimal sind, ist, dass die gesamten Informationen über jeden Webfont im CSS der Website hinterlegt werden muss - siehe unten. Der Crawler hat somit viel mehr zutun und verschwendet Crawling-Budget für das Darstellen von Schriftarten.

Webfonteinbettung

Webfonts werden über die @font-face-Regel im CSS File eingebunden. Im nachfolgenden Beispiel wird der Webfont Ubuntu ins CSS-File eingebunden:

/* ubuntu-regular - latin */
@font-face {
 font-family: 'Ubuntu';
 font-style: normal;
 font-weight: 400;
 src: url('../fonts/ubuntu-v14-latin-regular.eot'); /* IE9 Compat Modes */
 src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
      url('../fonts/ubuntu-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../fonts/ubuntu-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('../fonts/ubuntu-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
      url('../fonts/ubuntu-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../fonts/ubuntu-v14-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

Dieser Block gilt ausschließlich für Ubuntu Regular Latin. Wenn ein anderer Schrifttyp von Ubuntu an einer anderen Stelle verwendet werden soll, muss eine neue @font-face-Regel für den entsprechenden Schriftstil eingebaut werden.

Formate und Lizenzen

Webfonts werden meistens in folgenden Dateiformaten bereitgestellt.

  • EOT (Embedded Open Type)
  • OT (OpenType Format)
  • RTT (Raw TrueType)
  • SVG (Scalable Vector Graphics)
  • TTF (TrueType Font)
  • WOFF (Web Open Font)
  • WOFF2

Webfonts sind entweder kostenfrei oder kosten- bzw. lizenzpflichtig zu erwerben. Es gibt Gratisangebote, Pauschalangebote, Kombiangebote, Abonnementmodelle und die Abrechnung nach Pageviews.

Systemschriften

Systemschriften sind im Vergleich zu Webfonts in der Regel auf Computern bereits installiert. Daher muss beim Laden der Website kein zusätzlicher Datentransfer berücksichtigt werden und die Website kann (vor allem mobil) schnell dargestellt werden. Je Betriebssystem sind verschiedene Schriften vorinstalliert. Schriften, die auf fast jedem Betriebssystem installiert sind, werden als websichere Schriften bezeichnet. Systemschriften wie Arial sollten auf der Website immer als Fallback im CSS Font Sack hinterlegt sein. Bedeutet, wenn der Webfont nicht geladen werden kann, wird Arial als Backup Schrift geladen.

Websichere Schriften
Schrift Windows MAC OS iOS Android
Arial
Arial Black
Arial Narrow
Lucida Sans Unicode
Lucida Grande
Trebuchet MS
Tahoma
Verdana
Georgia
Palatino
Times New Roman
Courier New

Schriftbeispiele zu den in der Tabelle aufgeführten Schriftarten haben wir hier für Euch zusammengestellt.

Vorteile von Systemschriften

  • Suchmaschinenoptimierung: Ladezeit verbessern durch Standardschriften
  • nicht auf Browser und dessen Darstellung angewiesen
  • kann im Normalfall von jedem Gerät dargestellt werden

Anhänge

Diese Seite hat noch keine Anhänge, du kannst aber neue hinzufügen.

Ähnliche Artikel zu Online Marketing