In letzter Zeit sind mehrere Optionen zum Hinzufügen benutzerdefinierter Schriftarten zu Ihrer Website mit dem @ font-face-Selektor aufgetaucht. TypeKit ist ein aufregender neuer Spieler in diesem Spiel, da es sich in zwei Hauptbereichen auszeichnet: Benutzerfreundlichkeit und reichhaltige Schriftarten. In diesem Lernprogramm werden Sie durch einige kleine, äußerst einfache Schritte geführt, damit TypeKit auf Ihrer Website installiert werden kann. Hier finden Sie keine fortgeschrittenen Techniken oder Skripte. Selbst wenn Sie ein Neuling sind, sollte dies ein Kinderspiel sein!
Erstens: Die schlechten Nachrichten
Wenn Sie zur TypeKit-Website navigieren, sehen Sie, dass Sie nur die Wahl haben, sich für eine Einladung anzumelden. Dies bedeutet nicht, dass Sie sofort eine erhalten, so dass Sie möglicherweise eine Weile warten müssen, bevor Sie sich anmelden können. Glücklicherweise konnte ich mich von David Appleyard, dem Inhaber der Design Shack-Website, einladen, um Sie herumzuführen!
Anmeldung
Wenn Sie sich anmelden, haben Sie die Wahl zwischen einem von vier Plänen. Während Sie enttäuscht den Kopf schütteln, lassen Sie mich erklären, warum es nicht nur ein kostenloser Service ist. Einfach ausgedrückt, kosten Fonts Geld. Es gibt ein paar Megafontgießereien, die hochwertige Schriften erstellen und verkaufen, die nicht von Leuten heruntergeladen werden, die kostenlos herunterladen. Früher war es so, dass Sie, selbst wenn Sie als guter Bürger den vollen Preis für eine hochwertige Schriftart bezahlt haben, diese Schriftart aufgrund von Lizenzproblemen nicht auf Ihrer Website installieren können. Kurz gesagt, das Einbetten der Schrift bedeutete, dass Benutzer sie für sich selbst stehlen konnten. TypeKit umgeht dieses Problem aufgrund der Vereinbarungen, die es mit den großen Gießereien getroffen hat, um Schriften nur für die Verwendung im Web zu lizenzieren. Dies bedeutet, dass Sie nicht mit hässlichen, minderwertigen, kostenlosen Schriften für Ihre Website stecken, sondern mit einer großen Auswahl erstklassiger professioneller Schriften, wie Sie sie in der Druckwelt sehen würden. Lange Geschichte, Qualität hat ihren Preis. Hier sind die Pläne, aus denen Sie wählen können:
Beachten Sie, dass ich für dieses Tutorial die kostenlose Demo verwenden werde. Wir werden also eine beschnittene Auswahl an Schriftarten sehen und auf unserer Website auf zwei benutzerdefinierte Schriftarten beschränkt sein. Schauen wir uns unser Testgelände an!
Die Teststelle
Für dieses Tutorial habe ich eine schnelle und schmutzige Einzelseiten-Site mit Tonnen Text erstellt. Sie müssen wissen, dass ich den Hauptheader mit der? H1? Tag und der Absatztext mit einem einfachen? p? Etikett. Klicken Sie hier, um die Testseite live (und viel größer) anzuzeigen, oder sehen Sie sich den Screenshot unten an.
Kit-Setup
Nach der Auswahl eines Plans müssen Sie als Nächstes Ihr erstes Kit erstellen und eine URL einrichten. Beachten Sie, dass Sie keine bestimmte Seitenadresse eingeben müssen, sondern die URL für die gesamte Site. Zum Beispiel können Sie sehen, dass ich gerade die Design-Shack-URL eingegeben habe.
Bei der Anmeldung sollten Sie auch ein Skript erhalten, das in Ihre Site eingebettet werden kann. Als nächstes schauen wir uns an, was wir damit machen sollen.
Code einbetten
Der Schlüssel zum Überschreiben von CSS durch CSS ist der folgende Code-Code, den Sie in Ihre HTML-Datei einfügen können:
Platzieren Sie diesen Code einfach in den Header-Bereich der HTML-Seite, die Sie ändern möchten. Das ist alles, was Sie tun müssen! Ein einfaches Kopieren und Einfügen und schon kann es losgehen. Stellen Sie sicher, dass Sie die aktualisierte HTML-Seite auf Ihrer Website veröffentlichen, bevor Sie mit dem Hinzufügen von Schriftarten beginnen.
Schriftarten hinzufügen
Ob Sie es glauben oder nicht, wir sind fast fertig. Jetzt müssen Sie nur noch einige Schriftarten auswählen und ihnen sagen, wohin sie gehen sollen. Wie bereits erwähnt, bietet Ihnen TypeKit eine große Auswahl an hochwertigen Schriftarten, die Sie auswählen können, wenn Sie eines der kostenpflichtigen Angebote auswählen. Denken Sie daran, dass der freie Plan eine sehr viel begrenzte Auswahl hat (wenn auch keineswegs schlecht). Um unseren Hauptheader zu ersetzen, wählen wir eine kurvenreiche Schrift aus. Auf der rechten Seite der Schriftartenliste sehen Sie eine Reihe von Tags. Klicken Sie auf den? Distressed? tag, um nur die betroffenen Schriftarten anzuzeigen.
Gerne können Sie stöbern und wählen, was Ihnen gefällt. Wenn Sie einen gefunden haben, den Sie mögen, klicken Sie auf "Hinzufügen". Knopf (ich wählte Bodedo). Nach dem Klicken auf? Hinzufügen? Schaltfläche sollte das Kit-Editor-Fenster angezeigt werden.
Der Kit-Editor
Nachdem Sie eine Schriftart hinzugefügt haben, sollte das folgende Fenster angezeigt werden:
Hier werden Sie die von Ihnen gewählte Schriftart auf Ihre Site anwenden. Beachten Sie oben links im Editor, dass Sie einen benutzerdefinierten Selektor haben, der in Ihrem Code verwendet werden soll (in unserem Fall .tk-bodedo). Sie können den Code auf Ihrer Website aufrufen und einen beliebigen Selektor durch den hier angegebenen ersetzen, um die Schriftart zu ersetzen. Stattdessen teilen wir TypeKit die vorhandenen Tags mit, die wir auf unserer Website verwendet haben. Wie gesagt, unser Hauptsatz ist einfach ein? H1? Tag, also müssen wir nur noch tippen? h1? (ohne Anführungszeichen) in das Feld unter? Selektoren? und klicken Sie auf Hinzufügen.
Klicken Sie jetzt auf die Schaltfläche "Veröffentlichen". Das ist es! Den Rest erledigt das TypeKit. Aktualisieren Sie Ihre Seite nach ein oder zwei Minuten und Sie sollten die Schriftart sehen.
CSS anpassen
Eines der großen Dinge an TypeKit ist, dass es nur die Schrift ersetzt. Alle Einstellungen, die sich auf die Schriftart beziehen, sind weiterhin in Ihrem CSS steuerbar. Checken Sie meine Testseite aus, nachdem Sie der Absatzkopie eine benutzerdefinierte Schriftart hinzugefügt haben.
Beachten Sie, dass die neue Schriftart mit meinen aktuellen Zeilenhöheneinstellungen wirklich komisch aussieht. Es ist viel zu weit verbreitet und frisst jetzt viel mehr vertikalen Raum. Um dieses Problem zu beheben, bin ich einfach in meine CSS-Datei gegangen und habe die Zeilenhöhe meiner Absatzkopie nach unten gewählt. Jede Änderung, die ich in meinem CSS abgesehen von der eigentlichen Schriftart selbst vorgenommen habe, wirkt sich auf die neue Schriftart auf meiner Website aus. So können Sie nach Herzenslust gestalten und Ihre benutzerdefinierte Schriftart bleibt erhalten! Hier ist meine angepasste Zeilenhöhe.
Das fertige Produkt
Werfen Sie einen Blick auf die fertige Seite, um das TypeKit in Aktion zu sehen. Trotz der Tatsache, dass die Website vor Beginn sehr viel attraktiver war, können Sie leicht die Vorteile von TypeKit erkennen. Beachten Sie, dass die benutzerdefinierten Schriftarten, die Sie sehen, nicht auf Ihrem Computer gespeichert sind und dennoch eine perfekte Vorschau bieten und leicht auswählbar sind.Das Beste daran ist, dass dies alles mit einer benutzerfreundlichen GUI und nur einem Codeausschnitt durchgeführt wurde, den wir nicht schreiben mussten! Ich bin jedoch nicht alles Lob und Kompliment, wenn es um TypeKit geht. Bevor wir zum Schluss kommen, wollen wir kurz besprechen, was ich als nicht perfekt empfunden habe.
Die Kritik
Zuerst wollen wir technische Fehler besprechen. Ich habe bereits erwähnt, dass Sie bei der Veröffentlichung von? Publizieren? müssen Sie eine Minute warten, bevor die Site aktualisiert wird. Wenn Sie daran gewöhnt sind, die Aktualisierung codierter Änderungen sofort zu sehen, kann dies immens frustrierend sein. Der frustrierende Teil ist die Inkonsistenz. In einigen Fällen werden Änderungen fast sofort wirksam, während andere Sie für einige Minuten auf die Aktualisierungsschaltfläche klicken, um zu sehen, dass die Änderung stattfindet. Ich habe auch einige Probleme mit der Site selbst erlebt. Das Kit-Editor-Fenster weigert sich etwa zu 50%, für mich zu starten. Stattdessen bekomme ich ein leeres Fenster mit einer unendlichen Lade-Animation. Das Schließen des Fensters und das erneute Öffnen des Kit-Editors behebt das Problem, ist aber immer noch ein Ärgernis. Schließlich ist die Kostenstruktur für jeden Designer nicht einfach zu rechtfertigen. Sicher, wählbaren Text auf Ihrer Website zu haben, ist großartig, aber für 250 US-Dollar pro Jahr werden sich viele Leute wahrscheinlich nur mit dem Einfügen ausgefallener Schlagzeilen als Bilder beschäftigen.
Fazit
Das ist alles, was Sie wissen müssen, um mit TypeKit zu beginnen. Wir haben uns für die Anmeldung entschieden und einen Plan ausgewählt, das erste Kit eingerichtet, Zeichensätze zu Ihrer Site hinzugefügt, Ihre Änderungen veröffentlicht und Ihr CSS angepasst, nachdem Sie benutzerdefinierte Zeichensätze implementiert haben. Dies ist ein langer Artikel, aber das liegt nur daran, dass ich den Prozess in so kleine, überschaubare Schritte unterteilt habe. In der Realität können Sie TypeKit in wenigen Minuten auf Ihrer Website installieren. Melden Sie sich für Ihre Einladung an und teilen Sie uns mit, was Sie über TypeKit und andere benutzerdefinierte Schriftlösungen denken, die Sie gefunden haben. Fühlen Sie sich frei, um Fragen zu stellen.