Share
In diesem Artikel werfen wir einen Blick auf einige der bekanntesten Web-Font-Dienste, vergleichen die Features untereinander und sprechen über einige der roten Fahnen, die mit der Arbeit mit echten Schriftarten im Web verbunden sind.
Wir sind ein Glückspilz, wir Webdesigner der Gegenwart. Die Webdesigner von gestern hatten lange Zeit mit einer frustrierend kleinen Auswahl an Schriftarten zu kämpfen - den web-sicheren Systemschriftarten, die für die Verwendung auf dem Bildschirm getestet wurden. Sie kennen ihre Namen. Georgia, Times New Roman, Arial, Verdana - fast alle schütteln uns leicht den Rücken.
Aber nicht mehr. Die Webschriftart ist da! CSS3 hat echte Webfonts mit der Kraft von @ font-face in unseren Versorgungsgürtel aufgenommen. Mit dieser neuen Technologie ist jedoch eine überragende Verantwortung verbunden - der Kopfschmerz, der die Lizenzierung von Schriftarten für die Verwendung im Internet erfordert. Immer mehr Hersteller liefern Schriften mit Lizenzen für die Online-Nutzung. Wenn Sie die Schriften dann selbst hosten und die Kompatibilität zwischen Geräten und Browsern sicherstellen, kann dies eine andere Welt der Schmerzen sein.
Hier kommen Web-Font-Dienste ins Spiel. Sie erledigen den Großteil der Lizenzierungs- und Hosting-Arbeit, sodass Sie das tun können, was Sie am besten können: Erstellen Sie fantastische und wunderschöne Websites.
Ich werde hier über drei der beliebtesten Web-Font-Dienste sprechen. Nämlich Typekit
Fontdeck
und Google Web Fonts.
Alle diese Dienste hosten Ihre Zeichensätze auf ihren eigenen Servern und verwalten den gesamten Lizenzierungs-Unsinn, der damit einhergeht - Sie können also problemlos stöbern und spielen.
Diese Dienste verwenden nicht alle dieselbe Technik zum Einbetten von Schriftarten. Mit Fontdeck und Google Web Fonts können Sie die Schriften direkt mit einem Tag erfassen, um sie auf Ihrer Website zu verwenden, während Typekit einen anderen Ansatz verfolgt. Typekit erfordert, dass Sie ein JavaScript-Snippet in Ihre Site aufnehmen, das bei der Ausführung die erforderlichen Ressourcen für Sie bereitstellt.
Die Verwendung eines Tags hat einige offensichtliche Vorteile. Zum einen erfordert diese Methode nicht, dass der Benutzer JavaScript aktiviert hat. Darüber hinaus führt das von Typekit-Code generierte Skript zu mindestens zwei zusätzlichen http-Anforderungen - eine für ein anderes Skript und eine zweite für die CSS-Datei, die von diesem Skript abgerufen wird. Dies ist etwas, was Fontdeck und Google nicht leiden müssen.
Typekit hat jedoch einen erheblichen Vorteil, wenn Sie ein Skript anstelle von einfachem alten CSS verwenden - das wf- * Klassen.
Accentsconagua
wf- * KlassenWenn Ihre Site Zeichensätze von Typekits Servern über ihren JavaScript-Code anfordert, geschieht etwas Wunderbares - das Skript fügt dem html-Element Ihrer Site Klassen hinzu, abhängig vom Status der Anforderung für Zeichensätze.
Die Klassen sind WF-Laden, wf-aktiv, und wf-inaktiv. Was heißt das für uns? Nun, diese Klassen können uns dabei helfen, FOUT zu verhindern - das Flashen von ungestyltem Text, der beim Laden unserer Webfonts erscheint. Indem wir unsere Seiten beim Laden der Schriftarten entsprechend gestalten, können wir den unangenehmen Effekt verhindern, den FOUT für unseren Benutzer haben kann. Ein Beispiel finden Sie auf dieser Seite. Während die Schriftarten geladen werden, wird eine Klasse von wf-loading auf das HTML-Tag angewendet.
Mit CSS können wir den gesamten Inhalt ausblenden und eine Ladeanimation anzeigen, um dem Benutzer klar zu machen, dass etwas passiert. Sobald die Schriftarten geladen sind, können wir den Inhalt nach und nach wieder sichtbar machen. Mit Google Web Fonts können Sie auch ein Skript verwenden, wenn Sie die Vorteile dieser Klassen nutzen möchten. Tatsächlich war das Skript hinter diesen Klassen eine Zusammenarbeit zwischen Google und Typekit.
Für jeden dieser Dienste gilt ein anderes Preismodell. Google Web Fonts ist völlig kostenlos. Sie können sogar die Schriftarten für die lokale Verwendung auf Ihren Computern herunterladen. Dies ist besonders nützlich, wenn Sie versuchen, konsistentes Branding mit Typografie aufzubauen.
Typekit hat verschiedene Preiskategorien, die von einem kostenlosen Tarif bis zu 99 USD pro Jahr reichen. Der kostenlose Plan umfasst eine begrenzte Anzahl von Zeichensätzen, die nur für eine Website zulässig sind, und erfordert die Anzeige eines Typekit-Logos auf Ihrer Website. Bei allen bezahlten Plänen können Sie dieses Abzeichen entfernen und es können mehr Websites erstellt und mehr Schriftarten verwendet werden, je mehr Sie bezahlen. Weitere Informationen zu den Preisplänen finden Sie auf der Website.
Fontdeck verwendet eine andere Preismethode. Sie werden pro Schriftart berechnet, wobei die Zeichensätze (zum Zeitpunkt des Schreibens) im Preis von 2,50 US-Dollar pro Jahr liegen, aber normalerweise etwa 7,50 US-Dollar pro Jahr kosten.
Ein Hauptproblem bei der Verwendung von Webfonts ist, wie sie auf einer Vielzahl von Geräten, Browsern und Plattformen angezeigt werden. Leider können wir nicht sicherstellen, dass unsere Websites auf einem Gerät genauso aussehen wie auf einem anderen Gerät - wir wissen jedoch, dass dies in Ordnung ist. Wir können jedoch mit einiger Sicherheit feststellen, wie gut die Schriftarten gerendert werden.
Glücklicherweise wissen unsere Web-Font-Dienste, dass dies eine große Sache ist. Sie alle zeigen Screenshots der Darstellung der Schriftart in allen gängigen Browsern, einschließlich IE6 und höher, Google Chrome, Safari, Firefox und Opera. Im Allgemeinen werden Webfonts in allen Fällen gut dargestellt. Einige hellere Gesichter erscheinen in Windows möglicherweise unregelmäßig, aber das liegt nur an der Windows-Engine für das Rendern von Schriftarten - wir können dort nicht viel tun.
Beachten Sie bei der Verwendung von Webfonts in Ihren Websites die CSS-Eigenschaft zum Rendern von Text. Mit dieser Eigenschaft können Sie OpenType-Funktionen wie Ligaturen und Kerning verwenden, dies jedoch zu hohen Kosten. Bei WebKit-Browsern in Linux-Distributionen und in Chrome unter Windows mit einigen Schriftarten kann die Verwendung dieser Eigenschaft bei Inline-Textelementen zu merkwürdigen Nebeneffekten führen.
In diesem Sinne ist es wahrscheinlich eine gute Idee, diese (derzeit experimentelle) Eigenschaft zu meiden. Auf der anderen Seite implementiert Firefox die Eigenschaft nicht nur korrekt, sondern auch standardmäßig sind Ligaturen und Kerning aktiviert.
Wir wissen also über die verschiedenen Dienste und die Unterschiede zwischen ihrer Funktionsweise und über einige der roten Fahnen bei der Verwendung von Webfonts auf unseren Websites Bescheid - aber wie fangen wir damit an, sie zu nutzen??
Ein besonders praktisches Hilfsmittel, um sich mit Webfonts schmutzig zu machen, ist Typecast.
Mit Typecast können Sie alle in all diesen Diensten verfügbaren Web-Fonts in einer realen Web-Umgebung testen. Dort können Sie auch benutzerdefiniertes CSS hinzufügen und die Breite der Elemente festlegen - das gesamte Kit und caboodle. Das CSS, das Typecast für die Verwendung auf Ihrer eigenen Website erstellt, ist nicht wünschenswert - Schriftgrößen, Zeilenhöhen und Ränder werden in Pixel angegeben und nicht in Ems. Es ist jedoch immer noch ein unglaublich nützliches Werkzeug, um zu sehen, wie diese Schriftarten im realen Web aussehen.
Wenn Sie keine Inspiration für die Verwendung von Webfonts finden, ist der Typekit-Blog mit inspirierenden Websites sowie einigen faszinierenden Einblicken in die Technologie der Webfonts immer vollgepackt. Es gibt auch Websites wie Lost Worlds Messen, Just My Type (von Ihnen wirklich) und Good Web Fonts, auf denen Sie die wahre Stärke und Schönheit echter Fonts im Web sehen können. Die Website von Elliot Jay Stocks ist immer eine wirklich inspirierende Website, die auch Web-Fonts zeigt. (Vielleicht kannst du sagen - ich liebe dieses Zeug.)
Wenn es darum geht, die Dienste tatsächlich zu nutzen, könnten sie nicht einfacher sein. Google Web Fonts besteht aus Plug-and-Play-Funktionen. Suchen Sie die gewünschte Schriftart, klicken Sie auf "Schnellzugriff" und wählen Sie die gewünschten Schriftarten und Variationen aus. Sie erhalten einen Link, den Sie in Ihrer Website oder in Ihrer CSS-Datei über @import verwenden können, oder einen Javascript-Ausschnitt, mit dem Sie die Klassen "wf- *" nutzen können.
Mit Fontdeck können Sie die Schriftart auf einigen Computern testen, bevor Sie sie für die breite Verwendung auf Ihrer Website erwerben. Wählen Sie einfach die Schriftart aus, die Sie mögen, und Sie erhalten einen Link, den Sie auf den Websites verwenden können. Testen Sie es auf einigen Computern, indem Sie die IP-Adresse der Website auf Fontdeck hinzufügen. Wenn Sie damit zufrieden sind, können Sie die Schriftart einfach kaufen, um sie uneingeschränkt nutzen zu können.
Für Typekit gibt es einen kostenlosen Plan, mit dem Sie eine recht umfangreiche Bibliothek mit Schriftarten kostenlos nutzen können, vorausgesetzt, Sie zeigen auf Ihrer Website einen Ausweis an, der Sie über die Verwendung von Typekit informiert. Es ist eigentlich kein schlecht aussehendes kleines Abzeichen, aber wenn Sie wollen, dass es weg ist, müssen Sie einen Plan bezahlen.
Der Portfolio-Plan ist unglaublich umfangreich und hat nur wenige Einschränkungen. Der Preis beträgt vernünftige 49,99 USD pro Jahr. Wenn Sie über Adobe Creative Cloud verfügen, erhalten Sie den Portfolio-Plan. Um Typekit auf Ihrer Website zu verwenden, erstellen Sie einfach ein "Kit" - eine Sammlung von Schriftarten für die von Ihnen angegebenen Domänen. Kopieren Sie das Javascript-Snippet auf Ihre Websites, fügen Sie dem Kit einige Schriftarten hinzu, wählen Sie die gewünschten Gewichte und Variationen aus und denken Sie daran, "Kit veröffentlichen" zu drücken. Es kann einige Zeit dauern, bis die Server von Typekit Änderungen widerspiegeln. Geben Sie dem Server daher einige Minuten, bevor Sie Ihre Site aktualisieren.
Seit Juli 2012 bietet Typekit eine verbesserte JavaScript-Einbettung.
Diese neue Einbettungsmethode verbessert die Leistung, bietet protokollbezogene URLs und optionales (offizielles) asynchrones Laden. Durch das asynchrone Laden können Schriftarten in eine Seite gezogen werden, ohne die Warteschlange für andere Elemente zu blockieren, falls Probleme auftreten.
Mit etwas Glück sind Sie jetzt mit genügend Informationen über Web-Font-Dienste ausgestattet, um sich einzumischen und Ihre eigene Meinung zu fassen. Welches dieser Systeme und Funktionen bevorzugen Sie? Haben Sie Erfahrung mit einem der Services? Ratschläge und Hinweise, die Sie teilen möchten? Lass es uns in den Kommentaren wissen!
