Hinweis:

Typekit ist jetzt Adobe Fonts

Bisher wurden die Webschriftarten für eine bestimmte Website in einem Baukasten organisiert. Diesen bezeichnen wir jetzt als Webprojekt.

Die Schriftarten werden weiterhin mit dem von uns bereitgestellten Einbettungscode Ihrer Website hinzugefügt (wie in diesem Tutorial erläutert) und nutzen dieselbe Schriftartenlizenzierung. Weitere Informationen zu Adobe Fonts.

Webschriftarten von Adobe Fonts können auf Ihren Websites, in HTML-E-Mail-Kampagnen, Artikeln im AMP-Format von Google und vielen anderen Arten von Projekten verwendet werden, die Webschriftarten unterstützen.

Auswählen zu verwendender Schriftarten

Beginnen Sie damit, die Schriftarten-Bibliothek zu durchsuchen. Sie können in der Modusauswahl am oberen Rand der Seite zwischen der Standardsammlung und der Sammlung mit japanischen Schriftarten wechseln.

Wechseln zwischen Schriftensammlungen auf fonts.adobe.com

Fügen Sie Filter hinzu, um die Liste der Schriftarten zu optimieren. Sie können nach Klassifizierung (z. B. Serif oder Sans Serif), Eigenschaften (z. B. x-Höhe, Breite oder Stärke) oder Sprache filtern. Sie können auch zwischen zwei „empfohlenen“ Kategorien wählen: Überschriften und Absätzen. Diese Schriftarten werden in diesen Größen in allen Browsern und Betriebssystemen besonders gut angezeigt.

Die Sammlung von japanischen Schriftarten hat abweichende Filterparameter, sodass eine Filterung nur nach Kana-Schriftarten oder Stil-Klassifikationen wie Mincho, Gothic, Maru Gothic und Pinsel möglich ist.

Durchsuchen der Bibliothek für japanische Schriftarten

Erstellen eines Webprojekts

Wenn Sie eine Schriftart finden, die Ihnen gefällt, klicken Sie auf die Schaltfläche </>, um die Schriftfamilie einem Webprojekt hinzuzufügen.

Erstellen eines Webprojekts aus einer Schriftkarte

Sie können auch auf den Namen der Schriftart klicken, um die Seite der Schriftartenfamilie zu öffnen, sodass Ihnen alle Schriftstärken und -stile angezeigt werden, die zur Verwendung zur Verfügung stehen. Klicken Sie dann oben auf der Seite auf „Zum Webprojekt hinzufügen“ </>, um die Schriftartenfamilie zu einem Webprojekt hinzuzufügen.

Erstellen eines Webprojekts von der Schriftartenfamilien-Seite.

Im Fenster „Schriftarten zu einem Webprojekt hinzufügen“ geben Sie Ihr Webprojekt an und wählen aus, welche Schriftarten verwendet werden sollen.

  1. Klicken Sie auf das Menü und wählen Sie „Neues Projekt erstellen“ aus.
  2. Benennen Sie Ihr Webprojekt.
  3. Verwenden Sie die Kontrollkästchen, um die Schriftstärken und -stile auszuwählen, die Sie verwenden möchten.
  4. Erstellen Sie das Projekt.

Sie können über die Seite Meine Adobe-Schriften zudem später noch Änderungen an den Projekteinstellungen vornehmen.

Erstellen eines Projekts: Wählen Sie einen Namen und die Schriftstile.

Als Nächstes erhalten Sie den Einbettungscode, um die Schriftarten auf Ihre Website zu laden. Die verschiedenen Optionen werden auf der Hilfeseite zum Einbettungscode erläutert. Der Standard-Einbettungscode eignet sich für die meisten Projekte.

Kopieren Sie den Einbettungscode und fügen Sie ihn dem <head>-Tag Ihrer Website hinzu.

Betten Sie Code und CSS für Ihr Webprojekt ein.

Klicken Sie auf „Fertig“, um das Fenster mit dem Webprojekt zu schließen und mit der Suche fortzufahren.  Um Ihrem Projekt weitere Schriftarten hinzuzufügen, klicken Sie auf die Schaltfläche </> einer anderen Schriftartenfamilie und wählen Sie dann Ihren Projektnamen aus dem Menü aus (anstelle von „Neues Projekt erstellen“).

Anpassen Ihres Webprojekts

Das Webprojekt und alle von Ihnen hinzugefügten Schriftarten, werden unter Meine Adobe-Schriften hinzugefügt. Klicken Sie auf die Schaltfläche „Projekt bearbeiten“, um die enthaltenen Schriftstärken und -stile zu ändern, eine Webschriftartenfamilie ganz aus dem Projekt zu entfernen oder den Zeichensatz zu ändern, der die Sprachunterstützung des Projekts spezifiziert.  

Ein Webprojekt auf der Seite „Meine Adobe Fonts“.

Ostasiatische Schriftarten müssen mit dynamischem teilweisem Laden bereitgestellt werden, während andere Schriftarten über sprachbasierte Ladeoptionen verfügen: „Standard“, „Alle Zeichen“ oder eine benutzerdefinierte Einstellung für die jeweilige Sprache. Die Hilfeseite für Sprachunterstützung und teilweises Laden von Sprachen bietet weitere Informationen zu verschiedenen Optionen.

Sie können auch beliebige OpenType-Merkmale in das Projekt einbeziehen, indem Sie das Feld „OpenType-Funktionen“ aktivieren. Das Aktivieren dieses Felds zeigt außerdem eine Liste der verfügbaren Merkmale für diese spezifische Webschriftartenfamilie, wie zum Beispiel Ligaturen, Sonderzeichen oder Kapitälchen.

Wenn Sie das Projekt auf die gewünschte Weise konfiguriert haben, klicken Sie auf „Änderungen speichern“, um das Projekt zu speichern. Die Aktualisierungen werden binnen Minuten zur Verwendung auf Ihrer Website zur Verfügung gestellt.

Anwenden der Schriftarten in Ihrem CSS

Auf der Seite zum Webprojekt werden der Name der CSS-Schriftartenfamile, die numerische Stärke und der Schriftartenstil zu jeder Schriftart innerhalb des Projekts aufgeführt. Verwenden Sie diese Schriftartenfamiliennamen in Ihrem CSS, um die Schriftarten auf den Text anzuwenden.

CSS-Regeln für das Anwenden der Webschriftarten auf Ihre Website.

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