Was ist ein Webfont? 1

Was ist ein Webfont?

Google Fonts-Logo auf blauem Hintergrund

Wussten Sie, dass Ihr Webbrowser automatisch Schriftarten herunterlädt und verwendet, die nicht auf Ihrem System installiert sind? Webfonts sorgen dafür, dass die Seiten, die Sie täglich durchsuchen, besser aussehen. Hier ist, was sie sind und wie sie funktionieren.

Desktop-Schriften vs. Web-Schriften

Wir alle verwenden jeden Tag Schriftarten. Einige von ihnen werden mit Ihrem Betriebssystem geliefert, einige stammen aus Anwendungen wie der Adobe Creative Suite oder Microsoft Office, und einige werden von Ihnen heruntergeladen oder gekauft und installiert. Nach der Installation können Sie diese Schriftarten in Textverarbeitungsprogrammen, Bildbearbeitungssoftware und mehr verwenden. Dies sind Desktop-Schriftarten, und sie werden lokal gespeichert.

Ein Beispiel für Desktop-Schriftarten.

Eine andere Schriftart hat an Bedeutung gewonnen, da unsere Computererfahrung ins Internet verlagert wurde. Dabei handelt es sich um Webfonts – Typografie, die in der Cloud gespeichert (und dann in Ihrem Browser zwischengespeichert) und zur Generierung des auf Websites angezeigten Textes verwendet wird.

Eine kurze Geschichte der Webfonts

In den frühen Tagen des Internets war die Typografie auf Webseiten auf die Schriftarten beschränkt, die auf Ihrem System installiert waren. Wenn eine Schriftart nicht installiert war, würde die Webseite eine Standard-„Fallback“-Schriftart laden, die mit größerer Wahrscheinlichkeit verfügbar war. Aus diesem Grund wählen Webdesigner häufig Standardsystemschriftarten für ihre Websites.

Der Ursprung von Comic Sans: Warum hassen es so viele Leute?

VERBUNDENDer Ursprung von Comic Sans: Warum hassen es so viele Leute?

Darunter waren die von Microsoft Kernschriftarten für das Web, eine Reihe von Schriftarten, die für das Webdesign kostenlos zur Verfügung gestellt werden. Dieses Paket enthielt weit verbreitete Systemschriften wie Times New Roman, Arial, Comic Sans und Trebuchet. Alternativ könnten Designer Schriftfamilien wie Serif, Sans-Serif und Monospace verwenden, um den allgemeinen Stil einer Schrift anzugeben, auch wenn eine bestimmte nicht verfügbar war.

Dies änderte sich 2010 mit der Einführung von Google Google-Schriften, ein riesiges Open-Source-Repository für kostenlose Schriftarten, die überall im Web verwendet werden können. Seitdem sind andere Konkurrenten wie Adobes Typekit und im Web gehostete Font-Plugins aufgetaucht. Millionen von Websites aus der ganzen Welt laufen mit Webfonts, einschließlich der Produktivitätssuite von Google.

Wie Webfonts funktionieren

Der größte Anbieter von Webfonts, Google Fonts, ist eine umfangreiche Webbibliothek mit über tausend Schriftarten. Sie können sie auf Ihrer Website verwenden, indem Sie sie über CSS abrufen, und mobile Entwickler können beim Erstellen von Android-Apps auf diese Schriftarten zugreifen.

Wenn eine Webseite Google Fonts verwendet, ruft sie eine Schriftart aus der Google-Datenbank ab und zeigt Ihnen dann den Text in dieser Schriftart in Ihrem Browser an. Diese Schriftarten werden auf dem Server von Google gehostet und fast sofort geladen. Andere Cloud-Font-Dienste funktionieren ähnlich.

Eine andere Alternative besteht darin, stattdessen selbst gehostete, eingebettete Schriftarten im Web zu verwenden. Dies geschieht durch die Web Open-Schriftformat (WOFF) – eine von Mozilla entwickelte komprimierte Schriftartendatei, die mit den meisten modernen Webbrowsern kompatibel ist. WOFF ist nützlich, wenn Sie eine benutzerdefinierte Schriftart einbetten möchten, die in einem Web-Font-Dienst nicht verfügbar ist.

Abrufen von Webfonts

Roboto Open Sans auf schwarzem Hintergrund

Das Google Fonts-Repository und alle darin enthaltenen Schriftarten sind völlig kostenlos und für jeden zugänglich. Es verwendet nur Schriftarten unter einer offenen Lizenz, und viele dieser Schriftarten sind zu einem festen Bestandteil des Webdesigns geworden, wie Roboto, Lato und Montserrat. Google hostet eine Website die alle verfügbaren Schriftarten auflistet und Ihnen ermöglicht, diese auszuprobieren und miteinander zu vergleichen. Google bietet auch eine Datenbank mit kostenlosen Vektorsymbolen an.

Da diese Schriftarten frei verfügbar sind, können Sie auch die Originalschriftdateien für die Verwendung auf Ihrem Desktop herunterladen. Viele Websites hosten die Repositories von Google Fonts, darunter Googles eigener Github. Sie können diese Schriftarten in Projekten verwenden, sie frei mit anderen teilen und sie kostenlos von anderen Stellen im Internet herunterladen.

Viele Website-Builder und Content-Manager wie WordPress und Squarespace bieten standardmäßige Unterstützung für Webfonts. Wenn Sie eine benutzerdefinierte Website verwenden, müssen Sie die Schriftartdatei auf Ihren Server hochladen und CSS-Code verwenden, um auf die Schriftartdatei zu verweisen, die Sie verwenden möchten.

Wenn Sie mehr über die Verwendung von Webfonts für Ihre Website erfahren möchten, lesen Sie hier CSS Webfont-Anleitung von W3Schools.

VERBUNDEN: So installieren und verwalten Sie Schriftarten in der Einstellungs-App von Windows 10

Unterstützen Sie unsere Arbeit ❤️

Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einem Trinkgeld unterstützen, damit wir weiterhin großartige Inhalte veröffentlichen können.

Sichere Zahlung mit PayPal