Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Cloudservices für Designer

Google Fonts für Websites benutzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier geht es darum, wie Sie Google Fonts für Websites verwenden, CSS- und HTML-Passagen kopieren und an der richtigen Stelle einfügen.
03:14

Transkript

Google Fonts wurden vor allem bekannt weil Google die Schriften auch hostet, damit Webdesigner sie in ihren Websites verwenden können. Dazu wird in der HTML-Datei im Head-Bereich der Link zum Google-Font eingefügt, und im CSS, also der Formatierung der HTML-Datei, wird dann die gewünschte Schrift aufgerufen. Und das geht so: Ich wähle zuerst bei Google Fonts den Font, den ich verwenden will in meiner HTML-Datei. Dazu verwende ich diesen Filter und ich sage jetzt mal: Ich möchte einen "Handwriting"-Font, damit wir dann wirklich im HTML sehen, dass da ein eigener Font verwendet wurde. Ich entscheide mich mal für dieses "Shadows Into Light" und sage da über das "+"-Zeichen: Ich möchte diesen Font verwenden. Das öffnet mir da unten diesen schwarzen Balken und hier auch schon habe ich den Code zum Kopieren. Das ist der Link, der in den Head-Bereich der Website kommt und das ist dann der Code für die CSS-Datei, wo ich dann steuere, welcher Bereich meiner HTML-Datei denn diesen Font verwenden soll. Ich kopiere mir also den Link. Rechte Maustaste "Kopieren" und habe da, im Dreamweaver bereits eine ganz simple HTML-Datei vorbereitet. Da im Head-Bereich, der von hier bis hier geht, habe ich einen Kommentar reingefügt und diesen Kommentar ersetze ich jetzt einfach mit diesem Link zu den Google Fonts. Rechte Maustaste "Einfügen". Ich gehe zurück in den Browser und kopiere mir noch den CSS-Code. Rechte Maustaste "Kopieren", ab nach Dreamweaver und hier in der Definition für den Titel "H1" füge ich nun den CSS-Code ein. Auch da, rechte Maustaste "Einfügen". Die geschweifte Klammer nehme ich noch auf die nächste Zeile, weil das einfach "Best Practice" ist, und ich kann jetzt da unten rechts, in der Live-Vorschau von Dreamweaver 2017 mir diese Website anzeigen lassen. Ich drücke auf die Vorschau und sage: Ich möchte in Google Chrome diese Vorschau. Klar, die HTML-Datei speichern. Und Sie sehen, hier ist jetzt dieser Google Font geladen. Schriften für die eigene Website von Google zu laden macht aus zweierlei Gründen Sinn: Die Google-Schriften-Server sind extrem schnell. Ein Garant dafür, dass die Schriften auf Ihrer Website dann auch blitzschnell geladen werden. Und zum anderen: Die Schriften stehen unter einer Open-Source-Lizenz. Sie dürfen also alles, was Google an Schriften zur Verfügung stellt kostenlos für Ihre kommerziellen Web-Projekte nutzen.

Cloudservices für Designer

Lernen Sie praktische Dienste in der Cloud kennen, die Sie bei Ihren Publikationen unterstützen, egal ob für Print oder Web.

2 Std. 9 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!