Webschriften 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 Webschriften unterstützen.
Auswählen zu verwendender Schriften
Beginnen Sie damit, die Schriftenbibliothek zu durchsuchen. Wählen Sie ggf. die benötigte Sprachunterstützung im Dropdown-Menü SPRACHEN UND SCHRIFTSYSTEME.
Fügen Sie Tags oder Filter hinzu, um die Liste der Schriften weiter einzugrenzen. Verwenden Sie unsere Tags in natürlicher Sprache, um nach Schriftarten zu suchen, die zur Stimmung Ihres Projekts passen, oder filtern Sie nach Klassifizierung (z. B. Serifen- oder Groteskschrift), Eigenschaften (x-Höhe, Breite oder Stärke) oder Sprache.
Erstellen eines Webprojekts
Wenn Sie eine Schrift finden, die Ihnen gefällt, klicken Sie auf die Schaltfläche </>, um die Schriftfamilie einem Webprojekt hinzuzufügen.
Sie können auch auf den Namen der Schrift klicken, um die Seite der Schriftfamilie zu öffnen, sodass Ihnen alle Schriftstärken und -schnitte angezeigt werden, die zur Verwendung zur Verfügung stehen. Klicken Sie dann oben auf der Seite auf „Zum Webprojekt hinzufügen“ </>, um die Schriftfamilie zu einem Webprojekt hinzuzufügen.
Im Fenster „Schriften zu einem Webprojekt hinzufügen“ geben Sie Ihr Webprojekt an und wählen aus, welche Schriften verwendet werden sollen.
- Klicken Sie auf das Menü und wählen Sie „Neues Projekt erstellen“ aus.
- Benennen Sie Ihr Webprojekt.
- Verwenden Sie die Kontrollkästchen, um die Schriftstärken und -stile auszuwählen, die Sie verwenden möchten.
- Erstellen Sie das Projekt.
Sie können über die Seite Meine Adobe Fonts zudem später noch Änderungen an den Projekteinstellungen vornehmen.
Als Nächstes erhalten Sie den Einbettungscode, um die Schriften 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.
Klicken Sie auf „Fertig“, um das Fenster mit dem Webprojekt zu schließen und mit der Suche fortzufahren. Um Ihrem Projekt weitere Schriften hinzuzufügen, klicken Sie auf die Schaltfläche </> einer anderen Schriftfamilie und wählen Sie dann Ihren Projektnamen aus dem Menü aus (anstelle von „Neues Projekt erstellen“).
Anpassen Ihres Webprojekts
Ihr Webprojekt und alle von Ihnen hinzugefügten Schriften werden unter Meine Adobe Fonts hinzugefügt.
Klicken Sie auf die Schaltfläche „Projekt bearbeiten“, um Schriftstärken und -stile zu ändern, eine Webschriftfamilie vollständig aus dem Projekt zu entfernen oder die Eigenschaft „font-display“ festzulegen. Sie können auch den Zeichensatz im Web-Projekteditor ändern, der die Sprachunterstützung des Projekts angibt.
Ostasiatische Schriften müssen mit dynamischem teilweisem Laden bereitgestellt werden, während andere Schriften ü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 beliebige OpenType-Merkmale in das Projekt einbeziehen, indem Sie das Feld „OpenType-Funktionen“ aktivieren. Durch Aktivieren dieses Felds wird außerdem eine Liste der verfügbaren Merkmale für diese spezifische Webschriftenfamilie angezeigt, z. B. Ligaturen, Sonderzeichen oder Kapitälchen.
Mit „font-display“ können Sie festlegen, wie Webschriften im Webbrowser geladen und auf Ihre Website angewendet werden. Weitere Informationen zu diesen Optionen finden Sie auf der Hilfeseite zu den Einstellungen für „font-display“.
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 Schriften im CSS
Auf der Seite zum Webprojekt werden der Name der CSS-Schriftfamile, die numerische Stärke und der Schriftschnitt zu jeder Schrift innerhalb des Projekts aufgeführt. Verwenden Sie diese Schriftfamiliennamen im CSS, um die Schriften auf den Text anzuwenden.
Bei Ihrem Konto anmelden