Share
In diesem Tutorial werde ich Ihnen zeigen, wie Sie Web-Schriftarten in Ihren Adobe Muse-Projekten verwenden. Wir werden die im Web-Font-Katalog angebotenen Optionen für Schriftarten behandeln, einschließlich Google Web-Fonts und selbst gehostete Fonts.
Wir werden auch sehen, wie Adobe Muse mit welcher Art umgeht kippen mit Webfonts gerendert werden, also fangen wir an!
Laden Sie das Video herunter oder abonnieren Sie Tuts + Web Design auf Youtube.
Hallo, und willkommen auf Tuts + für ein neues Tutorial zu Adobe Muse. Ich bin Michael Chaize und ich werde Ihnen zeigen, wie Sie Web-Fonts in Ihren Projekten verwenden können. Mit Adobe Muse können Sie also einen Textblock auswählen und mit dem Textwerkzeug natürlich die Schriftart definieren, die Sie in Ihrem Design verwenden möchten.
Sie können die Web-Safe-Schriftarten verwenden. Dies ist eine Liste der standardmäßig in allen Browsern installierten Schriftarten. Dies sind jedoch von Microsoft 1996 definierte Schriftarten. Daher möchten Sie vielleicht mit Web ein wenig Spaß und Kreativität in Ihr Design einbauen Schriftarten. Wenn Sie also sagen, dass Sie Webfonts hinzufügen möchten, können Sie auf den Adobe Edge-Webfonts-Katalog zugreifen.
Dies ist also ein Katalog von kostenlosen Webfonts. Tatsächlich enthält er alle Google-Webfonts und wird von Adobe gehostet. So können Sie zum Beispiel sagen, dass Sie verwenden möchten Aladdin, Sie müssen es also nur überprüfen, indem Sie auf OK drücken und Aladdin wird der Liste der Schriftarten hinzugefügt.
Jetzt können Sie zurückgehen und sagen, dass Sie Aladdin verwenden möchten. Wenn Sie also Ihre Seite veröffentlichen und sie dann im Browser überprüfen, können Sie sehen, dass ich den Text auswählen kann. Dies ist echter Text im Web.
Warum erzähle ich dir das? Wenn Sie eine Schriftfamilie verwenden möchten, die nur auf Ihrem Computer installiert ist, geschieht Folgendes. Also wähle ich meinen Text aus und browse meine Schriftarten auf meinem Computer. Und lassen Sie uns sagen, dass ich verwenden möchte Mistral. Auf Ihrem Bildschirm erscheint ein neues Symbol.
Dies bedeutet, dass diese Schriftart auf dem Computer installiert ist, was in Ordnung ist. Dies bedeutet jedoch nicht, dass Sie es im Internet verwenden können. Es handelt sich nicht um eine Webschriftart, und möglicherweise haben Sie keine Lizenz, um sie im Web zu verwenden. Deshalb konvertiert Adobe Muse diese beim Veröffentlichen Ihrer Seite in HTML. Es nimmt den Text und konvertiert ihn in ein Bild. Nun kann ich den Text nicht auswählen, okay. Es ist ein Bild. Und Sie sehen, es ist nicht scharf und für die Suchmaschinenoptimierung ist das nicht gut. Weil der Google-Roboter den Inhalt dieses Textes nicht analysieren kann.
Aus verschiedenen Gründen möchten Sie dies nicht tun. Vielleicht kann es manchmal nützlich sein für einen Titel. Okay, Sie möchten das Aussehen der Schrift beibehalten. Das ist gut. Es gibt jedoch so viele Webfonts im Web. Ich werde Ihnen also zeigen, wie Sie jede Webschriftart mit einer entsprechenden Lizenz für das Web verwenden können.
Wenn Sie also zum Menü für Webschriftarten zurückkehren, können Sie auf den Katalog der Edge-Webschriftarten zugreifen. Es gibt mehr als 500 Schriftarten. Ich meine, das ist viel.
Oder Sie können selbst gehostete Webschriftarten verwenden. Adobe Muse benötigt WOFF-, EOT- oder SVG-Dateien, offene Standards, um Schriftarten im Web für einen Webbrowser zu beschreiben. Lassen Sie mich Ihnen zeigen, was Sie tun können. Ich werde nur eine Website auswählen, die kostenlose Schriften für den kommerziellen Gebrauch auflistet, nämlich Font Squirrel.
Was mir an Font Squirrel gefällt, ist, dass Sie leicht den Inhalt des Katalogs filtern können und sagen können, dass ich eine Schriftart haben möchte, die ich auf meinem Desktop installieren und verwenden kann, aber auch auf meiner Website.
Also werde ich den Web-Font-Filter hier überprüfen. Und dann können Sie natürlich eine Kategorie auswählen, eine Klassifizierung. Also brauche ich Slab Serif-Schrift und sie sieht eigentlich gut aus, also werde ich die Datei herunterladen.
Ich habe also Fett, Fett-Kursiv, Kursiv und Normal, also werde ich Regular auf meinem Desktop installieren. Ich doppelklicke einfach und installiere die Schrift. Jetzt kann ich es in meiner Adobe Muse-Site verwenden, aber wie Sie sich vorstellen können, verhält es sich wie Mistral, also als Systemschriftart.
Also gehe ich zurück und wähle Bitter. Okay, ich habe es in Muse, aber es wird in ein Bild umgewandelt, und das will ich nicht. Ich möchte Bitter als Webfont verwenden. Das Problem hier ist also, wenn Sie hierher zurückkehren, Fügen Sie Webfonts hinzu.
Es wartet auf WOFF-Dateien oder EOT-Dateien. Auf Font Squirrel gibt es einen kostenlosen Dienst, den Web Font Generator, den Sie verwenden können.
Also werde ich die Schriftarten hinzufügen. Es wird die Schrift hochgeladen, dann klicke ich auf Laden Sie Ihr Kit herunter. Und es wird eine neue ZIP-Datei für mich erstellt, die diesmal Web-Schriftarten enthält.
Okay. Dies ist also der neue Ordner, und jetzt habe ich eine EOT-Datei, SVG, WOFF. Ich kann es also in Adobe Muse verwenden. Wenn wir also in Adobe Muse zurückkehren, kann ich jetzt auf meinem Computer nach diesem Ordner suchen, der die WOFF-, EOT- und SVG-Dateien enthält.
Aber auch hier muss ich das Kontrollkästchen aktivieren, nur um zu bestätigen, dass ich eine gültige Lizenz habe, kann ich sie im Web verwenden. Adobe Muse führt die Übereinstimmung automatisch mit der auf meinem System installierten Bitter-Schriftart durch. Okay. Daher ist es für Muse sehr wichtig, da ich in der Desktop-App die Systemschriftart und einmal im Web diese Gruppe von Schriftarten verwenden werde.
Ich veröffentliche die Seite. Wir stellen fest, dass dies Text in Ordnung ist. So können Sie Webschriftarten direkt in Adobe Muse hinzufügen. Und wir alle wissen, dass Typografie für das Webdesign unerlässlich ist. Und es gibt so viele Webfonts. Ich finde es eine großartige Ergänzung.
Für einen detaillierteren Blick auf Adobe Muse werfen Sie einen Blick auf meinen kostenlosen Kurs "Gestalten und Veröffentlichen von Websites mit Adobe Muse".
Accentsconagua