Heute erfahren Sie, was die neue Google-Schriftart ist und wie Sie sie in Ihren Designs sofort umsetzen können.
Es ist kostenlos und kann in weniger als einer Minute installiert werden, sobald Sie den Dreh raus haben!
Einführung
Im vergangenen Jahr gab es ziemlich viele Optionen für die Implementierung benutzerdefinierter Schriftarten im Web. Jeder weiß, dass die Zukunft der Web-Typografie hell ist, aber niemand weiß genau, wie das Ergebnis aussehen wird.
Viele Unternehmen haben diese aufstrebende Technologie zu Recht als Möglichkeit gesehen, Geld zu verdienen. Wir haben kürzlich einige der in dieser Arena verfügbaren Optionen eingehend untersucht. Unsere Artikel zu TypeKit und FontDeck zeigen, dass diese Lösungen schnell, einfach und nicht ganz anders sind. Diese Art von Diensten wird sicherlich noch für einige Zeit Tonnen von Premium-Schriften zu erschwinglichen Preisen anbieten.
Wenn Sie jedoch die wirklich beliebte Technologie im Web betrachten, wird ein Trend entstehen: kostenlos. HTML, CSS, JavaScript, PHP, die Verwendung kostet nichts. Es ist daher vernünftig anzunehmen, dass die wirkliche Zukunft der Web-Typografie in einer freien Lösung liegt, die von den Massen ohne Einschränkungen verwendet werden kann.
Ein Game Changer?
Wenn Google seinen Hut in einen Ring wirft, neigt er dazu, alles zu ändern. Vor kurzem hat Google (in Verbindung mit Typekit) leise eine Webfont-API eingeführt, die zu einer solchen langfristigen Verschiebung führen könnte. Während andere Unternehmen Mitgliedschaften, Zahlungspläne und Abonnements einrichten, verzichtet Google auf einen Dienst, der ausschließlich Mitgliedern zur Verfügung steht, und bietet jedem Webentwickler eine kostenlose und einfache Möglichkeit, benutzerdefinierte Schriftarten schnell in ein Webdesign zu laden.
Um zu sehen, wie alles funktioniert, tauchen wir kurz in ein Beispiel ein. Bevor wir loslegen, hier eine kurze Vorschau und eine Live-Demo von dem, was wir bauen werden.
Das HTML
Um den Spaß zu erhöhen, verwenden wir HTML5 und CSS3 zusammen mit der Font-API von Google. Auf diese Weise erhalten wir einen guten Einblick in die mögliche Zukunft des Webdesigns! Beachten Sie, dass bei diesen Technologien immer noch Probleme mit der Browserkompatibilität bestehen. Wenn Sie also einen überflüssigen Browser verwenden, sollten Sie wissen, dass Ihre Erfahrung zwar etwas zurückgesetzt wird, sich aber in Ordnung lässt.
Der Starter Code
Fügen Sie zunächst ein leeres HTML5-Code-Snippet ein.
Dies ist eine modifizierte Version einer Starter-Datei, die ich auf Snipplr gefunden habe und die einen JavaScript-Hack enthält, der dem guten alten IE zusammen mit HTML5 helfen soll.
Die Divs
Wir halten die Seite super einfach und enthalten nur eine Überschrift, eine Überschrift und eine einfache Fußzeile. Dies gibt uns drei einzigartige Bereiche zum Spielen. Wir verwenden diese Bereiche, um zwei verschiedene Schriftarten aus der Google-API zu implementieren.
Wie Sie sehen, habe ich ein h1-Tag für die Überschrift, ein p-Tag für den Untertitel und das HTML5-Fußzeilentag für die Fußzeile verwendet. Für letzteres habe ich eine ungeordnete Liste von Links eingefügt, nur um dort etwas zu haben. Fühlen Sie sich frei, all dies zu ändern, wenn Sie mitverfolgen, da es egal ist, was Sie einfügen, solange Sie eine Kopie haben.
An diesem Punkt sollten Sie etwas Grundlegendes und Hässliches wie in der Abbildung unten haben.
Das ist alles HTML, das wir brauchen! Lass uns zum CSS springen.
Das CSS
Für das CSS habe ich mich entschieden, einen schönen Letterpress-Effekt zu implementieren, der von diesem Line25-CSS3-Tutorial inspiriert wurde. Bei Browsern, die keinen Textschatten unterstützen, ist der Text immer noch gut lesbar und sollte den Google-Webfont beibehalten.
Grundlegende Stile
Zuerst implementieren wir ein super einfaches CSS-Reset und geben eine Hintergrundfarbe ein.
Die Schlagzeile
Als nächstes werfen wir einige Styles für die Überschrift. Wir möchten eine Schriftfarbe, die dunkler als der Hintergrund ist, und eine Schattenfarbe, die heller als der Hintergrund ist, um diese schöne Illusion des Buchdrucks zu erzeugen.
Beachten Sie, dass wir auch das div und den Text zentriert haben. Normalerweise vermeide ich zentrierte Weblayouts aus verschiedenen Gründen, aber dies dient lediglich dazu, Text vorzuführen, sodass ein zentriertes Div perfekt funktioniert. Wenn Sie es nicht mögen, können Sie Ihren Text links ausrichten.
Der Unterabschnitt
Als nächstes ist der Teilkopf oder die Absatzkopie. Wir werden dies im Wesentlichen genauso gestalten wie die Überschrift nur kleiner.
Beachten Sie, dass wir auch einige Link- und Schwebestile eingeführt haben. Wenn der Benutzer den Mauszeiger über einen Link bewegt, wird er heller und der Letterpress-Effekt wird zu einem normalen Schatten.
Die Fußzeile
Schließlich verwandeln wir unsere ungeordnete Liste in eine horizontale Linie mit gleichmäßig beabstandeten Kopien.
Hier habe ich Link- und Hover-Stile angewendet, die denen der Absatzkopie ähneln, und ein wenig Abstand hinzugefügt, um die Links zu entfernen.
Vorschau vor der Schrift
Beachten Sie, dass ich absichtlich alle Referenzen der Schriftfamilien weggelassen habe. Das liegt daran, dass wir im nächsten Schritt einige der Schriftarten aus der Google-API einfügen. Im Moment sollte Ihre Seite ungefähr so aussehen wie in der Abbildung unten. Beachten Sie, dass Ihre Schriftarten sich wahrscheinlich aufgrund der Standardeinstellungen in Ihrem Browser unterscheiden.
Wie Sie sehen, funktioniert unser Letterpress-Effekt einwandfrei. Es ist subtil, aber der Text sieht ein bisschen schöner aus.
Hinzufügen von Schriften mit der Google Font API
Nun, da wir eine grundlegende Seite zum Spielen haben, ist es Zeit, ein paar Schriftarten zu laden! Stoppen Sie zunächst die Seite Google Font API und klicken Sie auf das Google Font Directory.
Hier sehen Sie eine kurze Liste (derzeit 18) von Schriftarten zur Auswahl. Für jede Schrift stehen mehrere Varianten und Unterfamilien zur Auswahl. Wenn Sie eine gefunden haben, die Ihnen gefällt, klicken Sie darauf, um die zusätzlichen Optionen anzuzeigen. Ich werde wählen? IM Fell? und die erste Familie unter dieser Schrift (IM Fell DW Pica).
Wenn Sie zum obigen Bildschirm gelangen, klicken Sie auf "Code abrufen". Tab. Unter dieser Registerkarte finden Sie die Code-Snippets, die Sie zum Einfügen der Schriftart in Ihre Webseite benötigen. Es gibt zwei Möglichkeiten, die Schrift zu importieren: durch Verknüpfung im Kopfbereich Ihres HTML-Codes oder durch Verwendung einer @import-Anweisung. Wir werden beide verwenden, um ein Gefühl dafür zu bekommen, wie sie funktionieren.
Methode 1: Head Link
Zuerst packen Sie das Codefragment, das wie unten dargestellt aussieht, und fügen Sie es in den Kopfbereich Ihrer HTML-Seite ein.
Kopieren Sie nun das CSS-Snippet und fügen Sie es in die Überschriften- und Subhead-Abschnitte Ihres Stylesheets ein.
Das ist es! Nur zwei Aktionen zum Kopieren und Einfügen, und Sie haben sich einen neuen Webfont geschaffen.
Methode 2: @Import
Jetzt für die Fußzeilenschrift wiederholen wir den gleichen Vorgang mit einer Änderung. Finden Sie die Schrift Inconsolata? Wechseln Sie in der Google-Schriftartliste zu "Code abrufen". Tab und schauen Sie unter den? Schriftvarianten und fortgeschrittenen Techniken? Abschnitt für den folgenden Ausschnitt:
Fügen Sie dies ganz oben in Ihre CSS-Seite ein, kopieren Sie das CSS-Snippet der Schriftfamilie und fügen Sie es in Ihre Fußzeile ein.
Voila! Jetzt sollte Ihre Fußzeile die Inconsolata-Schriftart enthalten.
Endgültige Vorschau
Nachdem wir alle fertig sind, werfen Sie einen Blick auf die letzte Vorschau, um sie in Aktion zu sehen. Klicken Sie auf das Bild, um die Live-Demo zu sehen.
Weitere Informationen zum Laden von Schriftarten finden Sie im WebFont Loader, einer von Google bereitgestellten JavaScript-Bibliothek, mit der Sie den Vorgang optimieren können.
Pros
Es ist unnötig zu erwähnen, dass dies die schnellste und einfachste Webfont-Lösung ist, die ich je gesehen habe. Ich weiß, dass ich das in früheren Artikeln gesagt habe, aber diese Dinge werden immer besser! Das Fehlen eines Anmeldeprozesses ist eine echte Zeitersparnis für das Google-System. Da Sie nicht das Durcheinander der Registrierung bestimmter Domänennamen zur Lizenzierung der Zeichensätze durchlaufen müssen, können Sie sie sogar lokal in Ihrem Entwicklungsprozess testen! Diese nahtlose Integration in meinen aktuellen Workflow war ein großer Kick für mich, da ich es hasste, lokal mit der falschen Schriftart zu entwickeln und die benutzerdefinierte Schriftart auf der Live-Seite anzuwenden.
Wie fast alle gängigen Webfont-Lösungen verwendet das Google-System @ font-face, um die Arbeit zu erledigen. Warum machen Sie es nicht einfach selbst? Chris Coyier weist in seinem Artikel über die Google Font-API auf drei Hauptvorteile hin: • Bandbreiteneinsparungen (Gewicht liegt bei Google), Caching-Geschwindigkeit (dieselbe Schriftart wird auf mehreren Websites verwendet, Browser-Cache tritt ein) und Geschwindigkeit im Allgemeinen (bei Google ist CDN) schneller als Ihre Website).
Im Grunde geht es also um Geschwindigkeit und Geschwindigkeit! Nur eine technische Anmerkung für den Fall, dass Sie sich fragen: Der gesamte Text ist voll auswählbar und die Kopien / Pasten sehr gut. Ich hasse es, wenn benutzerdefinierte Schriften auf einer Website ausgewählt werden können, aber nicht korrekt kopiert werden!
Cons
Einer der größten Nachteile ist, dass derzeit nur sehr wenige Schriftarten zur Auswahl stehen, die Ihre Designs wirklich einschränken können. Zum Beispiel würde ich ursprünglich ein schönes fließendes Skript verwenden, aber ich hasste die beiden Möglichkeiten, die Google mir gab.
Denken Sie daran, dass dieses System noch sehr neu ist. Sie können also erwarten, dass es mit dem Hinzufügen neuer freier Schriftarten noch größer wird. Sie werden jedoch wahrscheinlich nie die Qualität und Vielfalt sehen, die Sie von einer Premium-Option wie FontDeck oder TypeKit erhalten.
Wie die Jungs von FontSquirrel kürzlich in einem Tweet betont haben, gibt es keine SVG-Version der Schriftart, was bedeutet, dass Sie Ihre eigene erstellen müssen, wenn Sie Unterstützung für iPhone / iPad benötigen.
Meine letzte Beschwerde ist, dass es definitiv einige Kerning-Probleme mit einigen der verfügbaren Schriftarten gibt (bedenken Sie auch, dass sie kostenlos sind). Ich bin ein Print-Typ, so dass mich das wirklich erschreckt. Sie können wahrscheinlich mit CSS korrigiert werden, es ist nur ein bisschen langweilig und nervig.
Fazit
Die Google Font-API ist ein weiteres Kapitel in der Geschichte der @ font-face-Methoden zur Erstellung vielfältigerer Typografien im Web. Obwohl die Auswahl der Schriftarten derzeit begrenzt ist, ist dies definitiv die beste Implementierung, die ich bisher ausprobiert habe, da sie so schnell und einfach ist.
Die Möglichkeit, auf einen Anmeldeprozess zu verzichten und lokal ohne die Kopfschmerzen einer bestimmten Domänenregistrierung zu testen, sind für mich echte Gewinnszenarien. Gefällt Ihnen das System von Google und wenn ja, werden Sie es verwenden? Verwenden Sie den Kommentarbereich unten, um Ihre Gedanken zu teilen.