Sie können sowohl Adobe Edge- als auch Webschriften in die Schriftenliste in Dreamweaver einbinden. In der Schriftenliste werden zuerst die von Dreamweaver unterstützten Schriftstapel aufgelistet und dann die Webschriften und die Edge-Schriften.

Adobe Edge-Schriften in die Schriftenliste aufnehmen

Sie können in Ihren Webseiten jetzt Adobe Edge-Schriften verwenden. Wenn in einer Seite eine Edge-Schrift verwendet wird, wird ein zusätzliches script-Tag eingefügt, um auf eine JavaScript-Datei zu verweisen. Diese Datei lädt die Schrift vom Creative Cloud-Server direkt in den Browser-Cache.

Beim Anzeigen der Seite werden die Schriften vom Creative Cloud-Server heruntergeladen, selbst wenn eine Schrift auf dem Computer des Benutzers verfügbar ist.

In 12.2 beispielsweise hat ein script-Tag, das nur die Schrift „Abel“ verwendet, das folgende Format:

<!----Das folgende script-Tag lädt eine Schrift vom Adobe Edge-Webschriftenserver herunter, damit sie in der Webseite verwendet werden kann. Wir empfehlen, dass Sie es nicht abändern. -->

<script src="http://webfonts.creativecloud.com/abel:n4:default.js" type="text/javascript"></script>

„Abel“ ist der interne Name, mit dem der Server die Schrift identifiziert. n4 bedeutet, dass die Variante der Schrift mit dem Schriftschnitt „normal“ und der Schriftstärke „400“ heruntergeladen wird.

In Dreamweaver CC hingegen wird das folgende Skript hinzugefügt:

<!----Das folgende script-Tag lädt eine Schrift vom Adobe Edge-Webschriftenserver herunter, damit sie in der Webseite verwendet werden kann. Wir empfehlen, dass Sie es nicht abändern. -->

<script>var adobewebfontsappname ="dreamweaver"</script>

<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>

  1. Wählen Sie „Modifizieren“ > „Schriften verwalten“.

  2. Die Registerkarte „Adobe Edge Fonts“ zeigt alle Adobe Edge-Schriften an, die Sie in die Schriftenliste aufnehmen können.

  3. Um Schriften in dieser Liste zu finden und in die Schriftenliste einzufügen, führen Sie die folgenden Schritte aus:

    • Klicken Sie auf die Schrift, die Sie in die Schriftenliste einfügen wollen.
    • Um eine Schrift wieder zu deaktivieren, klicken Sie erneut auf die Schrift.
    • Verwenden Sie Filter, um bevorzugte Schriften in die engere Wahl zu ziehen. Um beispielsweise nur Serifenschriften anzuzeigen, klicken Sie auf .
    • Sie können verschiedene Filter verwenden. Um beispielsweise nur Serifenschriften anzuzeigen, die sich für Absätze eignen, klicken Sie auf und dann auf .
    • Um eine Schrift aufgrund ihres Namens zu suchen, geben Sie den Namen in das Suchfeld ein.
  4. Klicken Sie auf , um einen Filter mit allen Schriften zu erstellen, die Sie ausgewählt haben.

  5. Klicken Sie auf „Fertig“.

  6. Öffnen Sie nun die Schriftenliste von einer beliebigen Stelle in Dreamweaver aus. Beispielsweise über die Schriftenliste im CSS-Abschnitt des Bedienfelds „Eigenschaften“.

    In der Schriftenliste werden zuerst die Dreamweaver-Schriftenstapel und dann die Webschriften aufgeführt. Zeigen Sie den unteren Teil der Liste an, um die Schriften zu finden, die Sie zuvor ausgewählt haben.

Expertenrat:

Expertenrat:
Train Simple

Webschriften in die Schriftenliste aufnehmen

Sie können Webschriften von Ihrem Computer in die Schriftenliste in Dreamweaver einbinden. Die hinzugefügten Schriften werden in allen Schriftartmenüs in Dreamweaver widergespiegelt. Es werden Schriften vom Typ EOT, WOFF, TTF und SVG unterstützt.

  1. Wählen Sie „Modifizieren“ > „Schriften verwalten“.

  2. Klicken Sie im angezeigten Dialogfeld auf die Registerkarte „Lokale Webschriften“.

  3. Klicken Sie auf die „Durchsuchen“-Schaltfläche, die dem Schrifttyp entspricht, den Sie hinzufügen möchten. Wenn die Schrift beispielsweise im EOT-Format vorliegt, klicken Sie neben „EOT-Schrift“ auf „Durchsuchen...“.

  4. Öffnen Sie auf Ihrem Computer den Ordner, der die Schrift enthält. Wählen Sie die Datei aus und öffnen Sie sie. Wenn der betreffende Ordner die Schrift auch in anderen Formaten enthält, werden sie automatisch in das Dialogfeld eingefügt. Zudem wird der Name der Schrift automatisch ins Feld „Schriftname“ eingetragen.

  5. Aktivieren Sie die Option, in der Sie bestätigen, dass Sie die Schrift für die Verwendung in der Website lizenziert haben.

  6. Klicken Sie auf „Fertig“. Die Liste der Schriften wird unter „Aktuelle Liste der lokalen Webschriften“ angezeigt.

    Hinweis:

    Um eine Webschrift aus der Schriftenliste zu entfernen, wählen Sie sie unter „Aktuelle Liste der lokalen Webschriften“ aus, und klicken auf „Entfernen“.

Eigene Schriftenstapel erstellen

Ein Schriftenstapel ist eine Liste der Schriften in einer CSS-Schriftfamiliendeklaration. Die Registerkarte „Eigene Schriftenstapel“ im Dialogfeld „Schriften verwalten“ bedienen Sie folgendermaßen:

  • Neue Schriftenstapel fügen Sie mithilfe der Schaltfläche „+“ hinzu.
  • Um vorhandene Schriftenstapel zu bearbeiten, wählen Sie im Feld „Schriftliste“ den Schriftenstapel aus. Mithilfe der Schaltflächen „>>“ und „<<“ aktualisieren Sie die Liste der ausgewählten Schriften.
  • Vorhandene Schriftenstapel löschen Sie mit der Schaltfläche „-“.
  • Mithilfe der Pfeilschaltflächen ändern Sie die Reihenfolge, in der die Schriftenstapel aufgelistet sind.

Vorschau der eingefügten Schriften anzeigen

In der Entwurfsansicht ist es nicht möglich, eine Vorschau der Edge- und Webschriften anzuzeigen. Wechseln Sie in die Live-Ansicht oder zeigen Sie die Seite in einem Browser an, um eine Vorschau der Schriften zu sehen.

script-Tag für Webschriften in mehreren Dateien aktualisieren

Wenn Sie eine Schrift in einer CSS-Datei aktualisieren, die mit mehreren HTML-Dateien verknüpft ist, werden Sie aufgefordert, das script-Tag auch in den zugehörigen HTML-Dateien zu aktualisieren. Wenn Sie auf „Aktualisieren“ klicken, werden die script-Tags in allen betroffenen HTML-Dateien aktualisiert.

script-Tag für Webschriften auf einer Seite aktualisieren

Wählen Sie „Befehle“ >„script-Tag für Webschriften bereinigen (aktuelle Seite)“, um alle Webschriften auf der Webseite zu aktualisieren, die nicht im script-Tag widergespiegelt werden.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie