Adobe hat vor kurzem einen kostenlosen Web-Font-Service eingeführt, der Typekit, ihren hervorragenden Premium-Service, ergänzt. Mit Adobe Edge Web Fonts stehen Ihnen derzeit etwa 500 kostenlose Schriftfamilien zur Verfügung, die Sie heute mit wenig Aufwand auf Ihrer Website verwenden können. Wie groß ist das?
Der Prozess zum Implementieren dieser Schriftarten ist nicht ganz so einfach wie bei einigen anderen Diensten, an die Sie gewöhnt sind. Heute werden wir uns damit beschäftigen, wie alles funktioniert.
Lernen Sie Edge-Webfonts kennen
Das Starten von Edge-Webfonts ist für Adobe etwas überraschend. Es gibt Adobe-Fans einen neuen Grund, auf den Kauf eines Typekit-Abonnements zu verzichten. Angesichts der Stärke freier Konkurrenten wie Google Web Fonts war dies möglicherweise ein notwendiger Schritt.
Der wirklich seltsame Teil ist für mich, wie fragmentiert die Idee im Moment erscheint. Edge Web Fonts verwendet eigentlich Typekit, um die Schriftarten bereitzustellen, aber es ist nicht, wie Sie vielleicht erwarten, nur ein neuer freier Plan, der mit Typekit erstellt wurde. Es ist derzeit eher ein eigenständiger Dienst. Dieser Dienst ist direkt in einigen Apps von Adobe implementiert, kann jedoch auch über diese Apps verwendet werden, wenn Sie die Dokumentation kurz aufrufen.
"Es ist nicht, wie Sie vielleicht erwarten, einfach ein neuer freier Plan, der an Typekit angehängt wird."Vielleicht verwendet Adobe den? Edge? Tools und Services als eine Art "Google Labs"? Stil-Spielplatz, was bedeutet, dass Edge Web Fonts möglicherweise eines Tages Teil von Typekit werden könnten. Aber das ist alles nur eine Vermutung, vorerst sind die beiden konzeptionell verschieden.
Implementierung: Wählen Sie Ihr Gift aus
Edge Web Fonts ist in Bezug auf die Auswahl ein wirklich fantastischer Dienst. Adobe, Google (Mitbewerber? Partner? Google verwischt immer diese Zeile) und andere stellen eine Menge großartiger Schriftarten bereit.
Die Frage ist: wie benutzt man es? Es ist eine einfache Frage, aber die Antwort ist etwas komplizierter. Es ist keine Hexerei, aber es gibt ein paar verschiedene Möglichkeiten, die Sie beachten sollten:
- Vorschau-Tool - Ein kleines Widget auf der Edge-Web-Schriftarten-Website, mit dem Sie eine Schriftart auswählen und sich den Code holen können.
- App-Unterstützung - Einige Adobe-Apps integrieren den Dienst direkt, sodass Sie problemlos auf die vollständige kostenlose Schriftbibliothek zugreifen können.
- Handbuch - Sie können die Dokumentation verwenden und Ihren eigenen Code schreiben, um beliebige Schriftarten an beliebigen Stellen zu implementieren.
Letztendlich sind die Optionen gut, und wir haben eine Reihe von Optionen zur Auswahl. Schauen wir uns die einzelnen aus der Nähe an.
Vorschau-Tool
Um das Vorschau-Tool zu verwenden, rufen Sie die Seite Adobe Edge Web Fonts auf und scrollen Sie bis zum Ende der Seite. In der linken Spalte sollten Sie folgendes Werkzeug finden:
Dieses kleine Tool ist einfach, aber praktisch. Sie wählen einfach eine Schriftart aus dem Dropdown-Menü und das kleine Vorschaufenster wird live mit Ihrer Auswahl aktualisiert. Sie können den Text sogar in der Vorschau anpassen:
Wie wir im obigen Screenshot gesehen haben, werden bei Ihrer Auswahl zwei Textausschnitte angezeigt, mit denen Sie die Schriftart auf Ihrer Site implementieren können. Es beginnt mit einem JavaScript-Embed:
Dann springen Sie zu Ihrem CSS und verwenden den Namen der Schriftart in Ihrem Code wie bei einer nativen Schriftart.
Das Problem
Das ist ziemlich einfach, richtig? Wählen Sie die Schriftart und den Code. erledigt. Ich bin mir nicht sicher, ob es einfacher werden könnte. Leider stößt man mit diesem Tool darauf, dass es ziemlich mühsam ist, tatsächlich eine Schriftart zu wählen, da dies Ihre Methode ist:
Wie Sie sehen, erhalten Sie eine große Klartextliste. Das bedeutet, dass Sie jede Option einzeln durchgehen und auswählen müssen, um die Vorschau anzuzeigen. Das ist natürlich nicht ideal!
App-Unterstützung
Derzeit ist die App-Unterstützung begrenzt, dies wird sich jedoch in naher Zukunft wahrscheinlich ausweiten. Ihre zwei Optionen sind derzeit Edge Code (Brackets) und Muse.
Ich bin kein Muse-Fan. Schauen wir uns also an, wie die App-Unterstützung in Edge Code funktioniert, der sich zu einem ziemlich coolen Texteditor entwickelt.
Webfonts im Edge-Code
Um Webfonts in Edge Code zu verwenden, wechseln Sie zu Ihrem CSS und beginnen Sie, eine Schriftfamilie auszugeben. Dies öffnet ein Kontextmenü mit einem Durchsuchen von Web-Schriftarten. Option unten:
Klicken Sie auf diesen Artikel und Sie erhalten etwas, das ist viel besser als die Klartextliste, die wir im vorherigen Beispiel gesehen haben. Hier sehen Sie ein Raster mit Font-Vorschauen, das dem von Google Web Fonts ähnelt.
Hier können Sie die Schriftarten durchsuchen, manuell scrollen oder die Filter links verwenden. Mit den beiden Schaltflächen oben links können Sie zwischen Kopf- und Absatzschriftarten wählen. Mit den acht Schaltflächen unten können Sie nach Stilen wie Slab Serif und Handschrift filtern.
Um eine Schriftart auszuwählen, wählen Sie sie einfach aus und klicken Sie auf die Schaltfläche? Taste. Das einzige, was Sie wirklich tun müssen, ist den Namen der Schriftart in Ihr CSS einzufügen, dann können Sie einige Sicherungsschriftarten manuell festlegen.
Das Problem
Obwohl ich die In-App-Unterstützung für die Auswahl einer Schriftart liebe, ist das, was passiert, wenn Sie die Wahl treffen, ein wenig unterdrückend. Es ist schön, dass der Name für Sie in das CSS eingefügt wird. Dies reicht jedoch nicht aus, um die Schriftart auf Ihrer Website tatsächlich zu implementieren. Sie benötigen immer noch das HTML-Snippet von vor. Dies wird nicht automatisch mit den obigen Schritten generiert, und es scheint auch keine klare Möglichkeit zu geben, dies aus dem HTML-Dokument heraus zu tun.
Letztendlich ist die In-App-Unterstützung so begrenzt, dass Sie die gesamte Dokumentation für die manuelle Implementierung durchsuchen müssen.
Manuelle Implementierung
Unsere letzte Option ist die manuelle Implementierung. In Adobe finden Sie ausführliche Dokumentationen, die Ihnen dabei helfen.
Der Schlüssel zum manuellen Implementieren von Zeichensätzen ist das Verständnis der Syntax der Verknüpfung im Einbettungscode. Hier ein Beispiel aus der Dokumentation:
Wie Sie sehen, ist hier viel los. Was wir tun, ist die Implementierung mehrerer Familien und die gezielte Variation. Hier ist ein kleines Diagramm, das ich aufgegriffen habe, um uns zu helfen, durchzugehen, was in diesem Link passiert:
Wie Sie sehen können, gibt es drei Teile, die wir brauchen, um unseren Geist zu umwickeln. Lassen Sie uns jeweils einen kurzen Blick darauf werfen.
Familie
Dies ist einfach, geben Sie einfach den Namen der Schriftart ein, die Sie verwenden möchten. Dies ist technisch alles, was Sie benötigen, um die benutzerdefinierte Schriftart zum Laufen zu bringen. Dies allein wird die ganze Familie anziehen. Sie können mehrere Familien mit einem Semikolon als Trennzeichen importieren.
fvd
In einigen Familien gibt es mehrere Variationen, z. B. "Extra Light". oder? Semibold? Sie können diese mithilfe der Schriftvariationsbeschreibung selektiv importieren. oder fvd, was durch einen Kleinbuchstaben und eine Zahl gekennzeichnet ist.
Anhand dieses Diagramms in der Dokumentation können wir leicht bestimmte Variationen der Familie greifen, anstatt das Ganze zu packen. Dadurch sparen Sie Zeit beim Laden. So sieht es in Aktion aus:
Wie Sie sehen, geben Sie zuerst die Familie ein und fügen dann einen Doppelpunkt gefolgt von den fvd-Codes ein, die durch Kommas getrennt sind.
Teilmenge
Mit Subsets können Sie die Größe der eingebetteten Schriftdatei steuern, indem Sie auswählen, ob Sie alle verfügbaren Glyphen benötigen. Momentan gibt es zwei Optionen: Standard und alle.
Der Standard? Set enthält Ihre Standardzeichen und ist normalerweise alles, was Sie brauchen. Die alle? set ist eine erweiterte Version, die Ihnen alles bietet, was die Schrift zu bieten hat. Kleine Extras und ungerade Zeichen werden hier angezeigt. Jede Schrift ist anders und enthält möglicherweise die Glyphe, die Sie implementieren möchten.
Wenn Sie die Standardeinstellung haben möchten? Teilmenge, müssen Sie nicht extra etwas eingeben. Wenn Sie das alles wollen? Teilmenge, werfen Sie einen Doppelpunkt und das Wort "Alle".
html]
[/ html]
Das Problem
Offensichtlich ist die manuelle Implantationsmethode die beste, da Sie so viel Kontrolle über die Schriftdateien haben, die Sie einbetten. Das Problem bei dieser Methode ist jedoch, dass Sie nicht wirklich eine gute Möglichkeit haben, zu sehen, worauf Sie sich einlassen. Die Dokumentation bietet lediglich eine riesige Liste unformatierter Schriftarten und ihrer Optionen:
Um eine Schriftart in der Vorschau anzuzeigen, müssen Sie sie testen, die In-App-Funktionalität oder das Vorschau-Tool verwenden, das wir oben gesehen haben.
Fazit
Adobe Edge Web Fonts ist eine äußerst robuste und umfassende Web-Font-Lösung, und ich bin begeistert, dass Adobe sie kostenlos zur Verfügung gestellt hat.
Es gibt verschiedene Möglichkeiten, eine Edge-Webfont zu implementieren, von denen jede ihre eigene Liste von Vor- und Nachteilen hat. Letztendlich würde ich gerne eine Typkit-ähnliche Web-App sehen, mit der Sie die Schriftarten in der Vorschau anzeigen und durchsuchen können, ohne in Edge Code oder Muse gezwungen zu werden. Ohne dies werde ich wahrscheinlich die meiste Zeit bei Google Web Fonts bleiben.
Was denkst du? Ist der neue kostenlose Font-Service von Adobe ausreichend, um sich zweimal überlegen zu lassen, wie Sie sich an Ihre typische Web-Font-Lösung wenden können? Warum oder warum nicht?