Benutzerhandbuch Abbrechen

Hinzufügen von Schriften zu Ihrer Website

  1. Adobe Fonts-Benutzerhandbuch
  2. Einführung
    1. System- und Abonnementanforderungen
    2. Browser- und Betriebssystemunterstützung
    3. Hinzufügen von Schriften auf dem Computer
    4. Hinzufügen von Schriften zu einer Website
    5. Hinzufügen von Schriften zu CC Mobile
  3. Schriftenlizenzierung
    1. Schriftenlizenzierung
    2. Verwalten Ihres Kontos
    3. Lizenzierung für Kunden von Creative Cloud für Unternehmen
    4. Hinzufügen von Schriftenlizenzen zu Ihrem Konto
    5. Entfernen von Schriften aus der Abonnementbibliothek
    6. Adobe Fonts ist für in China registrierte Adobe IDs nicht verfügbar
    7. Warum sind diese Schriften nicht in meinem Creative Cloud-Abonnement enthalten?
    8. Entfernen von Morisawa-Schriften ab September 2021
  4. Abrufen und Verwenden von Schriften
    1. Verwenden von Adobe Fonts in Creative Cloud-Anwendungen
    2. Verwalten Ihrer Schriften
    3. Fehlende Schriften in Desktop-Anwendungen auflösen
    4. Verwenden von Schriften in InDesign
    5. Schriften und Typografie
    6. Verwenden von Webschriften in HTML5 Canvas-Dokumenten
    7. Verwenden von Schriften in InCopy
    8. Verwenden von Schriften in Adobe Muse
    9. Verwenden von Webschriften in Muse
    10. Verpacken von Schriftendateien
    11. Leitfaden zur Fehlerbehebung: Hinzufügen von Schriften
    12. Hinzugefügte Schriften werden im Schriftmenü nicht angezeigt
    13. „Eine oder mehrere Schriften können nicht hinzugefügt werden“ oder „Eine Schrift mit diesem Namen ist bereits installiert“
    14. Was geschieht, wenn eine von mir verwendete Schrift vom Schriftenhersteller aktualisiert wird?
  5. Web-Design und Entwicklung
    1. Hinzufügen von Schriften zu einer Website
    2. Fehlerbehebungshandbuch: Hinzufügen von Schriften zu einer Website
    3. Verwenden von Webschriften in HTML-E-Mails oder -Newslettern
    4. Verwenden von Webschriften mit Accelerated Mobile Pages (AMP)
    5. CSS-Selektoren
    6. Anpassen der Verarbeitung von Webschriften mit Einstellungen für „font-display“
    7. Einbettungscodes
    8. Dynamisches teilweises Laden und Bereitstellen von Webschriften
    9. Schriftereignisse
    10. Warum stammen meine Webschriften von use.typekit.net?
    11. Website kann keine Verbindung mit use.typekit.net herstellen
    12. Verwenden von Webschriften mit CodePen
    13. Browser- und Betriebssystemunterstützung
    14. Domänen
    15. Verwenden von Webschriften bei lokaler Entwicklung
    16. Content-Sicherheitsrichtlinie
    17. Drucken von Webschriften
  6. Sprachunterstützung und OpenType-Merkmale
    1. Sprachunterstützung und teilweises Laden von Sprachen
    2. Verwenden von OpenType-Merkmalen
    3. Syntax für OpenType-Merkmale in CSS
  7. Schrifttechnologie
    1. OpenType-SVG-Farbschriften
    2. Ten Mincho: Wichtige Informationen zur Aktualisierung von Version 1.000

Web-Schriften 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 Web-Schriften 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.

Die Webschnittstelle „Schriften“ wird angezeigt und hebt die Spracheinstellungen hervor
Wählen Sie das Menü „Sprachen und Schriftsysteme“ aus, um das Menü für den Sprachfilter für Schriften anzuzeigen

Fügen Sie Tags oder Filter hinzu, um die Liste der Schriften weiter einzugrenzen. Verwenden Sie unsere Tags in natürlicher Sprache, um nach Schriften 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. 

Adobe Fonts-Tag-Suche

Erstellen eines Web-Projekts

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

Ein Bild der Schriftarten „Gilbert“ mit der hervorgehobenen Option „Familie hinzufü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 Web-Projekt hinzuzufügen.

Hinzufügen von Schriftfamilien und Auswählen von Schnitt und Schriftstärken auf der Webschnittstelle „Schriften“

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

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

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

Ein Bild eines Popups, in dem Schriftarten ausgewählt werden, um sie aus der Webschnittstelle „Schriften“ zu einem neuen Projekt hinzuzufügen

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.

Der Einbettungscode für Schriftarten wird im Bild zusammen mit den Schriftschnitten angezeigt

Klicken Sie auf „Fertig“, um das Fenster mit dem Web-Projekt 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 Web-Projekts

Ihr Webprojekt und alle von Ihnen hinzugefügten Schriftarten werden unter Schriften verwalten hinzugefügt.

Klicken Sie auf die Schaltfläche „Projekt bearbeiten“, um Schriftstärken und -schnitte zu ändern, eine Web-Schrift-Familie 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 Web-Schrift-Familie angezeigt, z. B. Ligaturen, Sonderzeichen oder Kapitälchen.

Mit „font-display“ können Sie festlegen, wie Web-Schriften 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-Code

Auf der Seite zum Web-Projekt 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.

wp-page

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?