In diesem Video zeige ich Ihnen, wie Sie mit gehosteten Web-Schriften arbeiten können.
Konkret mit Adobe Edge Web Fonts, die mit Dreamweaver CC integriert sind.
Der Prozess ist unglaublich einfach.
Wichtig ist, dass ein Selektor markiert ist.
Ich minimiere den Bereich „@Medien“ (@Media) und wähle „.textSizePx“.
Unter „Eigenschaften“ (Properties) navigiere ich zum Abschnitt „Text“.
Momentan wird die Schrift „Gill Sans“ angewendet.
Ich klicke darauf und dann im Menü unten auf „Schriften verwalten“ (Manage Fonts).
Daraufhin wird das Dialogfeld „Schriften verwalten“ geöffnet, in dem alle verfügbaren Edge Web Fonts angezeigt werden.
Die Nutzung ist kostenlos.
Diese Schriften werden von Google, Adobe und Designern gesammelt.
Der Service ist, wie schon gesagt, kostenlos.
Sie können jede dieser Schriften verwenden.
Wenn Sie eine bestimmte Schrift suchen, können Sie diese Liste nach Name filtern.
Sie können auch nur Schriften anzeigen, die für Überschriften empfohlen werden, oder nur die empfohlenen Schriften für Fließtext.
Natürlich kann man beide Filter auch deaktivieren.
Sie können Schriften nach Stil filtern, z.
B. nach Serifen- oder serifenlosen Schriften oder Egyptienne-Schriften.
Sie können die ganze Liste durchgehen.
Wenn Sie eine Schmuckschrift suchen, aktivieren Sie den Filter, und die Liste wird weiter eingegrenzt.
Dann wählen Sie eine geeignete Schrift.
In diesem Beispiel wähle ich eine auffällige Schrift aus.
Eine Schmuckschrift.
Diese hier.
Wenn sie ausgewählt ist, erscheint ein kleines Häkchen.
Hier unten wird darauf hingewiesen, dass man mit Klick auf „Fertig“ (Done) den Nutzungsbedingungen von Edge Web Fonts zustimmt.
Weitere Informationen dazu erhalten Sie mit Klick auf „Terms of Use“.
Ich klicke auf „Fertig“ (Done).
Zunächst verändert sich der Text nicht, aber die Schrift ist jetzt in der Property „font-family“ verfügbar.
Mein Edge Web Font steht ganz unten auf der Liste.
Er hat sein eigenes Symbol und wird auf der Liste in einem eigenen Abschnitt angezeigt.
So lässt sich leicht unterscheiden zwischen gehosteten Web-Schriften, in diesem Fall auf einem Remote-Server für Adobe Edge Web Fonts, und den Desktop-Schriften weiter oben auf der Liste.
Ich wähle die Schrift aus.
Daraufhin erscheint, sofern ich vorher eine Schriftstärke oder Schriftgröße definiert hatte, eine Warnung, dass diese Eigenschaften wahrscheinlich geändert werden.
Um eine Vorschau anzuzeigen, wechsle ich zur Live-Ansicht.
In der Live-Ansicht wird die neue Schrift gerendert.
Was passiert nun im Hintergrund, das sich von der Deklaration „@font-face“ unterscheidet, die wir aus dem vorherigen Tutorial kennen?
Hier im Quellcode (Source Code) sehen wir JavaScript.
Dieser JavaScript-Code referenziert eine JavaScript-Datei auf den Adobe-Servern.
Sie sehen, dass die Einbindung von gehosteten Web-Schriften sehr einfach ist.
Man könnte hier auch einen Schriftenstapel definieren, zur Sicherheit, falls die Schrift nicht geladen werden kann.
Das wäre eine Maßnahme, die Sie erwägen können.
Im Prinzip ist also die Arbeit mit Edge Web Fonts in Dreamweaver CC unglaublich einfach.
Wie schon erwähnt, ist das eine spannende Entwicklung in der Welt des Webdesign.
Die Arbeit mit speziellen Schriften war vor wenigen Jahren noch nicht möglich.
Man musste Bilder vom Text in der gewünschten Schrift erstellen.
Das ist Vergangenheit.
Damit werden Websites auch nicht mehr benachteiligt, von Suchmaschinen zumindest, weil statt Text Bilder verwendet werden.
So weit also Ihre Möglichkeiten bei der Arbeit mit Schriften in Dreamweaver CC.
