Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Creative Cloud im Überblick

Webschriften mit Typekit und Edge Webfonts einbinden

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Es stehen in der Adobe Creative Cloud mit Edge Webfonts sowie Typekit zwei unterschiedliche Optionen zur Auswahl, um entsprechende Webschriften auf einer Website einzubinden.
05:51

Transkript

Adobe stellt gleich zwei verschiedene Lösungen für Webschriften dar. Einmal die Lösung Edge Webfonts in Kooperation mit den Google-Webfonts und einmal Typekit. Wir schauen uns mal beides an. Wir können hier mal aus der Creative Cloud-App auf Typekit zugreifen. und innerhalb von dem Typekit-Dienst kann man sogenannte Font-Kits erzeugen. Gehen wir einfach mal hier drauf auf Browse Fonts. Und wenn ich jetzt hier entsprechend angemeldet bin, dann kann ich mir hier ein Font-Kit zusammenstellen. Gehen wir hierzu auf Kits. Ich sehe, hier habe ich schon eins erstellt. Ich sage einfach "Create a new Kit" und das kann ich jetzt hier für eine bestimmte Domain machen, mit einem Namen. Nennen wir einfach mal "Meine Webfonts". Und ich muss hier angeben, auf welcher Domain diese Webfonts später benutzt werden. Ich werde das hier erstmal nur fürs lokale Testen machen. also gebe ich mal hier die lokale Domain ein. Aber ich müsste jetzt hier zum Beispiel eine URL angeben so wie Sven Brencher.de oder Ähnliches. Und wir werden jetzt hier mal beides, einmal localhost und einmal meine interne und ja, kann ich auch vielleicht dann noch meine externe URL angeben. Bestätige das Ganze mit Continue. Und hier sehe ich jetzt auch gleich schon wie der Embed-Code aussieht. Das heißt, diesen Code, den kopiere ich mir einfach mal, und den kann ich jetzt bereits hier in mein Projekt, beispielsweise hier bei Edge Code eingeben. Das heißt wir fügen der Webseite diesen Script-Block entsprechend hinzu. Gehen wir zurück wieder. Wo haben wir jetzt hier das Browserfenster? Da ist es. Ich klicke hier jetzt einfach auf Continue. Und jetzt kann ich diesem Kit entsprechende Fonts hinzufügen. Gehen wir hier auf Browse all fonts. Wird jetzt hier im Hintergrund geöffnet. Und jetzt kann ich hier sagen, beispielsweise ich suche mal eine bestimmte Schrift, vielleicht irgendwas ausgefallenes. Nehmen wir doch mal hier so was. Die gibt es für Web Use, also haben wir Use font. Und die füge ich jetzt meinem Kit hinzu, meinem Webfont-Kit. Hier wird mir dann auch angezeigt, wie groß das Font-Kit ist, das ich jetzt hier benutzt habe. Ich kann vielleicht bei manchen Schriften hier Stile auslassen. Und wenn ich fertig bin klicke ich hier auf Publish. Hier oben könnte ich nochmal den Embed-Code für meine Seite abrufen. Das was ich ja eben gerade schon gemacht habe, aber ich finde ihn hier immer noch mal. Ich kann die Kit-Settings aktualisieren, hier beispielsweise, 'wenn ich weitere Domains hinzufügen möchte. Und kann hier Selektoren für den CSS-Quellcode hinzufügen. Hier zum Beispiel für die Überschrift, wo ich das benutzen möchte ein "h1", kopiere ich mir dann hier entsprechend den Text raus, und dann gehe ich wieder zu Edge Code, gehe hier in das "main.css" rein, und füge den Code hier entsprechend mal hinzu. Wir können das uns im Browser auch gleich mal angucken. Gehen wir hier auf Live Preview. Und hier können wir jetzt sehen, dass unsere Überschrift auch schon bereits die Typekit-Schriftart benutzt. Das heißt, wir sehen ja hier, dass die Überschrift ein bisschen groß... Gebe ich zu, es ist auch ein wenig schwer zu lesen. Wir probieren es hier vielleicht mal mit einem anderen Text. "Getting started". Ich glaube, ein glückliches Händchen mit der Wahl dieser Schriftart habe ich nicht, aber bei Typekit stehen ja noch wahnsinnig viele Schriften zur Verfügung. Also, was muss man tun, man muss sich die beiden Embed-Codes einmal kopieren, nämlich einmal hier den Script-Block, der muss in den head-Bereich der Webseite, und den CSS-Block, den wir hier gesehen haben, der muss dann entsprechend in das CSS-Stylesheet. Und ich muss natürlich ein Font-Kit hier in Typekit erstellen. Das kann ich auch in Edge Reflow benutzen. Wir haben das vorhin mal gesehen, wenn wir eine Photoshop-Datei umsetzen, und mir hier entsprechende Schriften fehlen, dann habe ich die Möglichkeit, diese durch diese Kit-ID zu ergänzen. Das heißt, wenn wir hier nochmal reingehen, die Kit-ID, das ist dieser Bereich, diese Zeichnung hier. Das müsste ich da entsprechend bei Edge Reflow dann eingeben. Die Einbindung von Edge Webfonts ist noch einfacher, denn man kann hier einfach auf das Textsymbol klicken. Einmal auf Done. Und dann kann ich hier diese Schriften einbinden. Machen wir das mal: Wir gehen dafür in das CSS-Dokument rein und nehmen jetzt mal hier diese Typekit-Schriftart heraus. Wir wollen das Ganze durch eine andere Schriftart ersetzen. Ich drücke die CTRL-Taste und die Leertaste, um meine code completion aufzurufen. und kann jetzt hier auf Browse web fonts gehen. Und dort können wir jetzt ebenfalls hier aus verschiedenen Schriftarten auswählen: Dekorative, Skript-Schriftarten, nehmen wir mal diese hier, die "Brush Script" Klicken auf Done. Und wenn ich jetzt meinen Browser nochmal aktualisiere, dann wird meine headline jetzt entsprechend mit der "Brush Script" dargestellt. Zumindest dann, wenn ich das Ganze im Browser teste, online also. Nicht jetzt über mein local-System, da wird es jetzt nicht korrekt dargestellt. Ich muss das Ganze dann wirklich auf einen Webserver laden. Das Ganze kann ich auch in Edge Animate benutzen. Gehen wir mal hier auf Edge Animate, starten das Programm mal. Auch da habe ich die Möglichkeit, Edge Webfonts für Schriften zu verwenden. Wir erzeugen mal hier eine neue Datei, gehen hier mal auf das Textwerkzeug, geben einen Text ein. Und können den dann jetzt hier formatieren, indem wir auf Schriftart hinzufügen gehen. Und hier werden mir jetzt die Edge Webfonts angezeigt. Ich kann mir hier also eine Schriftart auswählen, sagen Schriftart hinzufügen, und mit dieser Schriftart kann ich dann mein Dokument entsprechend formatieren. Mit Adobe Typekit und den Edge Webfonts stehen mir gleich zwei verschiedene Varianten zur Verfügung, wie ich meine Webseiten mit spannenden Schriften aufpeppen kann. Schauen Sie also ruhig mal, was diese beiden Schriften-Services an Fonts zu bieten haben.

Creative Cloud im Überblick

Lernen Sie Adobes Creative Cloud und all ihre Applikationen kennen. Sven Brencher zeigt, was hinter CC und den Applikationen für Web, Design, Fotografie und Publishing steckt.

7 Std. 24 min (55 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Mit dem Creative Cloud Update vom Oktober 2014 wurde Adobe Kuler umbenannt in Adobe Color.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!