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.

HTML und CSS für Designer

Webfonts in HTML-Seiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es gibt "webtaugliche" Fonts und auch die Einbindung externer Zeichensätze in die Website ruft heute keine Probleme mehr hervor. Dadurch können typographische Vorgaben leicht übernommen werden.

Transkript

Beginnen wir unsere Formatierung mit CSS, unsere "style"-Zuweisung mit CSS, mit der Typographie. Es macht überhaupt keinen Sinn, über Typographie irgendetwas zu übertragen, wenn wir die eigentliche Schriftart im Browser nicht vorhanden haben. Also ist der erste Prozess, sich diese Schriftart zu besorgen, diese einzubinden. Da müssen wir ein bisschen vorbereiten. Ich habe hier eine Überschrift und schaue mal hier, was das für eine Überschrift ist, nämlich, das ist die "Exo 2". Ich hatte darauf hingewiesen, dass man im InDesign-Dokument, bevor man Schriften verwendet, sich vergewissern muss, dass es diese Schrift auch für einen Web-Browser gibt, wenn man das übertragen möchte. Die "Exo2", die wird es geben. Nur muss ich mir genau anschauen, welche Formate ich mit der "Exo 2" verwendet habe. Ich habe hier in der Überschrift selber ein "bold"-Format, darunter ein "light"-Format, dann habe ich hier eine "Exo2 regular italic", das heißt normal, aber kursiv, ganz normaler Fließtext, aber auch das ist auch "light", und so wird es jetzt weitergehen. Da gibt keine Unterschiede mehr bis einschließlich hier unten, selbst das ist nur eine normale "light"-Überschrift. Noch mal zusammenfassend: Wir haben "fett", "light", "normal kursiv" und wieder "light". Das muss ich mir im Wesentlichen merken, danach suche ich auch meine Schrift in den jeweiligen Lieferanten, die online zur Verfügung stehen. Ich hatte einen empfohlen, und es ist einer der Größten, wo man auch bedenkenlos Schriften verwenden kann, ohne bange sein zu müssen, dass man gegen Lizenzrechte verstößt. Ich schalte mal die Leseleiste wieder ein und gehe hier auf die Google Fonts. Hier oben sehen Sie auch den Link: "www.google.com" und dann "/fonts", und Sie sind an der richtigen Stelle. 651 Font-Familien - Zeichensatz-Familien - gibt es hier, aber ich habe ja den Namen. also gebe ich hier mal "Exo" ein. Er sucht, das geht recht schnell, und findet zwei Stück. Die ursprüngliche, "alte" Exo, wenn man so will, und die "Exo 2", die ich auch in InDesign verwendet habe. Das Schöne ist nun, dass ich mir verschiedene Informationen dazu angucken kann. Ich gehe hier mal auf den Pop-up-Bereich, klappe das Ganze auf und dann sehe ich, dass ich also hier einige Schriften beziehungsweise einige Varianten, einige Beispiele drin habe. Wenn Sie dazu noch mehr sehen möchten, dann gehen Sie auf den nächsten Bereich, das ist hier "Pop out", das ist der dritte, nicht der nächste, und das Schöne ist, dass ich da noch ein paar weitere Infos bekomme. Einmal, wie das wieder aussieht, plus auch die Glyphen, die verfügbar sind. Das ist ja nicht ganz unwichtig. Wenn ich mal so einen Remark oder ein Copyright-Zeichen umsetzen muss, dann muss ich sicher sein, dass die Schrift das liefert. Das kann ich mir wunderbar anschauen, sogar Statistiken, in welchem Land die am meisten verwendet wird und wo nicht. Interessanterweise, in Afrika wird die gar nicht eingesetzt, und so weiter und so fort. Dann gibt es den Button in der Mitte, wenn ich sicher bin, die möchte ich einsetzen. Der Button hier in der Mitte, das ist das sog. "Quick-Use". Da klicke ich mal drauf, und jetzt ist genau das, was ich vorhin mir in InDesign angeschaut habe, relevant. Jetzt muss ich sagen, was brauche ich eigentlich. Wir haben die "normal", die "regular" in InDesign, wir haben die "regular italic", die brauchen wir auch, das heißt die zwei. Wir haben die "light" und wir haben die "bold", und das ist genau diese Kombination. Lassen Sie sich nicht verwirren mit diesen Angaben hier, 300, 400 und 700. Wichtig ist nur, dass ich mir das heraussuche, was ich aus dem InDesign-Dokument gestaltungsmäßig umgesetzt habe, die brauche ich dann auch hier in der Auswahl. Das Ganze kann ich mir sogar zu einer Collection zuordnen lassen. Wenn ich dann eingeloggt bin, dann finde ich diesen Font immer, dann weiß ich, ich habe den schon mal verwendet, und kann schnell darauf zugreifen. Nun gibt es zwei Möglichkeiten oder eigentlich drei Möglichkeiten, diese Font-Angabe in dem HTML-Dokument zu übernehmen. Einmal direkt im HTML-Dokument, steht auch hier, dass man das der Webseite hinzufügen soll. Sie kennen den Befehl bereits, der "Link"-Befehl der kommt in den Header-Bereich. Wenn ich mir das jetzt markiere, dann steht das auch schon hier. Man soll das Ganze in den "head"-Bereich implementieren, und dann ist noch ein Beispiel angegeben, damit man da nichts verkehrt machen kann. Da wir aber das Ganze nicht in der HTML-Datei direkt haben wollen, das ist das Gleiche wie bei den Stylesheets. Ich müsste in jede HTML-Datei diesen Link hineinkopieren. Das ist eigentlich überflüssig. Ich habe eine Stylesheet-Datei, und die verbinde ich mit jeder HTML-Datei. Ich gehe hier auf Import, und solange wir uns mit neueren, modernen Seiten, also HTML5 etc. auseinandersetzen, empfiehlt es sich, diesen Eintrag zu nehmen. Sie sehen, der ist auch übersichtlicher, erklärt sich von selber. Ich importiere die URL, und das Ganze kommt in der Angabe mit den "Exo 2"-Angaben: 300, 400, 700, 400 "italic". Das markiere ich mir nun, drücke "Command" oder "Steuerung-C" für die Zwischenablage und integriere das in meine CSS-Datei. Hier gibt es noch eine weitere Erklärung, wie man später damit umgehen kann, den Eintrag wie "Exo" und dergleichen, dazu kommen wir später noch. Zunächst einmal muss ich das in meine CSS-Datei übertragen. Ich gehe in meinen Editor, in die CSS-Datei, und damit ich auch später weiß, wo ich bin - das ist etwas Generelles, da sollte man eventuell daran denken, sich solche Kommentare zu setzen. Eine Stylesheet-Datei kann schon ganz schön groß werden. Hier füge ich nun mit "Command+V" diesen Eintrag ein. Das war schon alles, was ich machen muss, um in CSS einen Font zu übernehmen, den ich z. B. bei Google Fonts gefunden habe. Es gibt noch eine dritte Variante: Sie können sich all diese Fonts runterladen auf Ihrem Rechner, und dann z. B. über "font-face" selber auch definieren und einbinden. Das ist durchaus möglich. Da Sie die Webseite, wenn Sie sie veröffentlichen sowieso online setzen, kann man davon ausgehen, dass immer eine Online-Verbindung besteht, und dann empfiehlt sich durchaus dieser Prozess. Er ist auch viel kürzer als der andere. Nur die Info soll gelten, dass Sie es wissen: Sie können auch die Fonts separat zur HTML-Seite dabeilegen und damit sicher sein, dass sich nichts mehr dran ändert. Bei Fonts, die Sie sich von Google Fonts besorgen, gilt selbstverständlich das Gleiche. Und der Dienst ist auch so, dass er noch in ein paar Jahren verfügbar sein wird.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 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!