Startseite
» NETZ
»
WebFonter: FontShop-Schriftarten auf jeder Website in der Vorschau anzeigen – Was funktioniert jetzt?
WebFonter: FontShop-Schriftarten auf jeder Website in der Vorschau anzeigen – Was funktioniert jetzt?
WebFonter war ein Browser-Tool, mit dem man FontShop-Schriften direkt auf einer Website testen konnte, bevor man sie kaufte. Designer konnten damit Überschriften und Fließtext direkt ändern, anstatt eine Schriftart anhand eines statischen Musters zu beurteilen. Dieser ursprüngliche Workflow gehört nun der Vergangenheit an: Der Online-Shop von FontShop wurde 2023 geschlossen, und die ehemalige WebFonter-Adresse leitet nun auf eine FontShop-Informationsseite weiter, anstatt auf ein Installationstool. Sie können weiterhin Schriftarten über MyFonts in der Vorschau ansehen und mit der Typografie Ihrer Website in den Entwicklertools Ihres Browsers experimentieren.
Kann man WebFonter noch installieren?
Verwenden Sie nicht mehr die alten Installationsanweisungen für WebFonter. Laut den offiziellen FAQ zur Plattformabschaltung von Monotype wurde die Handelsplattform FontShop.com am 15. Dezember 2023 eingestellt . Die ursprüngliche WebFonter-Webadresse führt nun zur FontShop-Informationsseite, die Kunden zu MyFonts weiterleitet. Eine aktuell unterstützte WebFonter-Erweiterung oder ein Bookmarklet konnte nicht verifiziert werden. Die alten Anweisungen für Chrome-Erweiterungen und Bookmarklets sollten daher lediglich als Dokumentation der Funktionsweise des Produkts und nicht als Installationsanleitung betrachtet werden.
Was WebFonter ursprünglich tat
Der Hauptvorteil des Tools bestand darin, eine Schriftart im Kontext zu sehen. Anstatt ein separates Schriftmuster zu öffnen, konnte ein Designer eine echte Seite betrachten und deren Typografie ändern, während das Layout sichtbar blieb.
Öffnen Sie eine Website. Das ursprüngliche Tool wurde als Chrome-Erweiterung und als Bookmarklet für andere Browser angeboten. Es wurde als auf Live- und lokal gehosteten Websites nutzbar beschrieben, sofern der zugehörige Schriftartendienst erreichbar war.
Wählen Sie eine Schriftfamilie. Über die Funktion „Schriftfamilie ändern “ konnten Sie im FontShop-Katalog nach Schriftarten suchen und diese durchsuchen. Die Seitenvorschau wurde nach der Auswahl einer Schriftfamilie aktualisiert.
Stile zuweisen und anpassen. Die ursprüngliche Benutzeroberfläche begann mit Überschriften und Fließtext, ermöglichte das Hinzufügen weiterer Elemente und bot eine Feineinstellungsfunktion für Größe, Zeilenhöhe und Zeilenabstand.
Ein Schriftartenauswahltool auf Website-Ebene veranschaulicht die Art von Vergleich im Kontext, für die WebFonter entwickelt wurde.
Dies sind historische Funktionsbeschreibungen, nicht die aktuell bestätigten Menüs. In einigen älteren Rezensionen wurde auch die Tastenkombination Strg+H zum Ausblenden der WebFonter-Steuerelemente erwähnt. Von dieser Vorgehensweise ist in modernen Browsern abzuraten: Strg+H öffnet normalerweise den Browserverlauf, sofern die Seite oder das Tool dies nicht abfängt.
Wie man FontShop-Schriftarten heute auf einer Website testet
1. Testen Sie die Schriftart mit Ihren eigenen Wörtern.
Suchen Sie auf MyFonts nach einer passenden Schriftfamilie. Geben Sie in der Schriftfamilien- oder Einzelstilvorschau eine Überschrift, eine Navigationsbezeichnung oder einen Absatz aus Ihrem Projekt ein. Laut den MyFonts-FAQs können Sie die Größe und Farben der Vorschau anpassen und die unterstützten OpenType-Funktionen überprüfen. Die Funktion „Alben“ hilft Ihnen außerdem, Schriften zum direkten Vergleich zu sammeln. Testen Sie verschiedene Schriftschnitte: Eine ansprechende Display-Schrift ist möglicherweise nicht für lange Absätze geeignet.
Vergleichen Sie eine infrage kommende Schriftart in verschiedenen Stilen und Größen, bevor Sie sie für ein Seitenlayout festlegen.
2. Überprüfen Sie den Text, den Sie ändern möchten.
Öffnen Sie Ihre Website in Chrome, klicken Sie mit der rechten Maustaste auf eine Überschrift oder einen Absatz und wählen Sie „Untersuchen“ . Im Bereich „Elemente“ wird der ausgewählte HTML-Knoten angezeigt; im Bereich „Stile“ wird der entsprechende CSS-Code aufgelistet. Sie können auch den Elementauswahl-Pfeil verwenden, um Text auf der Seite auszuwählen. Die Dokumentation der Steuerelemente finden Sie in der Anleitung zum Untersuchungsmodus von Google .
Untersuchen Sie eine Überschrift und suchen Sie im Bereich „Formatvorlagen“ nach den Deklarationen für Schriftart, Schriftgröße und Zeilenhöhe.
3. Experimentieren Sie vorübergehend mit der Typografie.
Unter „Elemente“ → „Stile“ können Sie eine vorhandene Schriftfamilienangabe bearbeiten oder dem ausgewählten Element eine hinzufügen. Testen Sie beispielsweise „Georgia, serif“ als lokal verfügbare Alternative für eine Serifenschrift und experimentieren Sie anschließend mit Schriftgröße , Zeilenhöhe oder Buchstabenabstand . Änderungen sind in der Regel sofort sichtbar, werden aber nicht dauerhaft auf Ihrer veröffentlichten Website gespeichert. Google erläutert diese Steuerelemente in seiner CSS-Referenz für Entwicklertools .
Wichtig: Das Einfügen des Namens einer kommerziellen Schriftart in CSS lädt diese nicht automatisch herunter. Um die Schriftart auf Ihrer Seite anzuzeigen, muss sie entweder über eine ordnungsgemäß lizenzierte und geladene Schriftartenquelle oder durch eine zulässige lokale Installation verfügbar sein. Andernfalls zeigt der Browser eine Ausweichschrift an. Verwechseln Sie diese Ausweichschrift nicht mit der Schriftart, die Sie erwerben möchten.
Vergleichen Sie dieselbe Überschrift und denselben Absatz in zwei typografischen Varianten und achten Sie dabei auf Textumbrüche und Hierarchie.
4. Überprüfen Sie die Lizenz vor der Bereitstellung.
Eine kostenlose Vorschau im Online-Shop berechtigt nicht zur Einbindung der Schriftdateien auf einer öffentlichen Website. MyFonts erklärt, dass Webfonts über @font-face eingebettet werden und eine entsprechende Webfont-Lizenz erfordern. Zulässige Domains und Seitenaufrufe hängen von der jeweiligen Produktlizenz ab. Lesen Sie die Lizenzinformationen der Schriftfamilie und Ihre Kaufbedingungen, bevor Sie die Dateien produktiv einsetzen. Eine Desktop-Lizenz allein reicht nicht aus, um die Einbettung im Web abzudecken.
Was Sie vor der endgültigen Auswahl einer Schriftart überprüfen sollten
Überschriftenanpassung: Wird der Titel auf Desktop- und Mobilgeräten gleichermaßen natürlich umgebrochen?
Lesbarkeit des Textes: Sind kleine Schriftgrößen, Zeilenhöhe und Absatzdichte angenehm?
Schriftschnitte und Zeichen: Sind die benötigten Zeichen für Fettdruck, Kursivschrift, Satzzeichen und Sprachsymbole verfügbar?
Tatsächliches Laden: Wird das tatsächliche Gesicht angezeigt oder nur eine Browser-Ausweichlösung?
Lizenzierung: Deckt der erworbene Plan die Nutzung Ihrer Website ab?
Wenn eine Änderung scheinbar keine Wirkung zeigt, prüfen Sie, ob eine spezifischere CSS-Regel Ihre Bearbeitung überschreibt, ob die Schriftart tatsächlich geladen ist und ob Sie das richtige Seitenelement ausgewählt haben. Testen Sie verschiedene Viewport-Breiten. Der ursprüngliche Reiz von WebFonter lag im unmittelbaren Kontext; heute bietet die Kombination einer MyFonts-Schriftart mit temporären Änderungen in den Entwicklertools eine praktische Möglichkeit, eine fundierte Typografie-Entscheidung zu treffen, ohne zu behaupten, das eingestellte Tool sei noch verfügbar.