Benutzerdefinierte Schriftarten über @FontFace integrieren

Benutzerdefinierte Schriftarten sind eine großartige Möglichkeit, Ihre Website wirklich einzigartig zu machen. Sie können eine Schriftart wählen, die zu Ihrem Logo passt, eine Schriftart, die auf Ihren Visitenkarten und Pressematerialien verwendet wird, oder kreative Schriftarten, die zur Nische Ihrer Website passen. Die in IONOS integrierte Schriftarten-Sammlung sowie die von der Google Fonts-Bibliothek bereitgestellte Sammlung bietet Ihnen eine große Auswahl an Schriftarten, die zu diversen Website-Designs passen. Wenn diese Optionen nicht ausreichen, befolgen Sie den folgenden Leitfaden für die Einbettung benutzerdefinierter Schriftarten in Websites.

Haftungsausschluss: Diese Anleitung stützt sich auf ein Drittanbieter-Tool, nicht auf eines, das von IONOS entwickelt wurde. Beachten Sie außerdem, dass die @font-face-Technologie unter benutzerdefinierten Code fällt. Wir können nicht garantieren, dass die von Ihnen gewählte Schriftart die Web-Einbettung unterstützt, dass die Dateien, die Sie vom Hersteller erhalten, gebrauchsfertig sind oder dass der von Ihnen bearbeitete Code das richtige Format hat.

Obwohl diese Dinge selten zu Problemen bei der Bearbeitung Ihrer Website führen, stellen Sie bitte sicher, dass Sie eine Sicherungskopie Ihrer Website erstellen, bevor Sie Änderungen durch benutzerdefinierten Code vornehmen. Sie können unsere Richtlinie zu benutzerdefiniertem Code hier einsehen.

Benutzerdefinierten Schriftart-Dateien vorbereiten

Benutzerdefinierte Schriftarten können in verschiedenen Formaten vorliegen, die beliebtesten sind .otf, .ttf, .woff, .svg und .eot. Um Ihre Schriftart verwenden zu können, müssen Sie sicherstellen, dass Sie die .ttf- .eot- und .svg- Dateien besitzen.

Wenn Sie nur eine .otf- oder .ttf- Datei haben, empfehlen wir die Verwendung eines externen Tools, um die Schriftart in die erforderlichen Formate zu konvertieren (in unserer Anleitung weiter unten verwenden wir FontSquirrel, aber Sie können alle verfügbaren Alternativen verwenden).

Umwandeln von .otf- oder .ttf- Dateien

  1. Laden Sie die Schriftart im .otf- oder .ttf- Format herunter bzw. erwerben Sie sie.
    Hinweis

    Die Schriftart muss für das Web lizenziert sein, damit sie funktioniert.

  2. Gehen Sie zum „Webfont Generator“-Tool von FontSquirrel, laden Sie die Schriftart hoch und konvertieren Sie sie mit der Option Expert. Wählen Sie (mindestens) die folgenden Formate: TrueType (.ttf), EOT Lite (.eot), SVG (.svg) und laden Sie dann das Kit herunter.

Schriftart-Dateien zu IONOS hochladen

Wenn Sie bereits über die Links zu den Schriftarten verfügen (z. B. wenn sie bei Ihrem Schriftarten-Hersteller gehostet werden und dieser Ihnen die Links zur Verfügung stellt oder wenn Sie die Schriftarten auf die Filesharing-Plattform hochgeladen haben), fahren Sie mit dem nächsten Schritt fort. Andernfalls müssen Sie die generierten .ttf- .svg- und .eot- Versionen der Schriftart auf Ihrer Website einbetten.

  1. Klicken Sie im linken Panel auf Inhalt, klicken Sie auf Website-Inhalte und dann auf Dateien verwalten.
  2. Klicken Sie auf Neue Datei hochladen und laden Sie diese Dateien hoch.
  3. Wenn Sie mit der Maus über eines der Elemente in „Hochgeladene Dateien“ fahren, klicken Sie auf Auswählen, um eine Datei herunterladen-Schaltfläche auf Ihrer Website zu erzeugen.
  4. Klicken Sie in der Navigationsleiste auf Info & Extras () und dann auf Vorschau-Link. Klicken Sie mit der rechten Maustaste auf die Schaltfläche und wählen Sie Link-Adresse kopieren. Dies ist der Link zu der Datei auf Ihrer IONOS-Website.

    Dieser Vorgang muss für jede Datei separat durchgeführt werden, sodass Sie am Ende drei Links zu drei Dateiformaten haben.

    Hinweis

    Dieser Schritt funktioniert nicht bei der Vorschau innerhalb des Editors. Sie müssen den Vorschau-Link verwenden, der unter „Info & Extras“ in der Navigationsleiste zugänglich ist.

Dateien auf IONOS über @font-face einbetten

  1. Gehen Sie auf Ihrer Website zu Entwicklermodus, öffnen Sie die Datei site.css und fügen Sie den folgenden Code ein:

    2. @font-face {
font-family: 'FONT-NAME';
src: url('URL') format('embedded-opentype'),
url('URL') format('svg#FONT-NAME'),
url('URL') format('truetype');
font-weight: normal;
font-style: normal;
}
  2. Navigieren Sie zu dem Ordner, der Ihnen von Ihrem Schriftarten-Hersteller zur Verfügung gestellt oder von FontSquirrel heruntergeladen wurde, und suchen Sie nach einer Stylesheet-Datei mit einem ähnlichen Code wie oben abgebildet. Die Zeile, die mit font-family: beginnt, enthält den eindeutigen Namen, der Ihrer Schriftart zugewiesen wurde.
  3. Kopieren Sie den Namen der Schriftart und ersetzen Sie zwei Instanzen von FONT-NAME im obigen Code-Ausschnitt durch Ihren Schriftnamen.
  4. Speichern Sie und schließen Sie den Entwicklermodus.
  5. Klicken Sie im linken Panel auf Inhalte und dann auf Website-Inhalte.
  6. Klicken Sie auf Dateien verwalten und dann auf Auswählen in der Schriftartdatei, um der Website eine Schaltfläche hinzuzufügen.
  7. Klicken Sie auf die Schaltfläche, um den Inhaltseditor zu öffnen, klicken Sie mit der rechten Maustaste auf die Schriftart-URL und wählen Sie Link-Adresse kopieren.
  8. Gehen Sie in den Entwicklermodus, öffnen Sie site.css, und ersetzen Sie die URL durch Pfade zu den jeweiligen Formaten, die Sie hochgeladen haben (die kopierte URL aus der Schaltfläche in Schritt 7), und klicken Sie auf Speichern.
Warnung

Vergessen Sie nicht, die Schlusszeichen zu ändern: ein Semikolon am Ende der Dateiliste und ein Komma nach .svg- Formaten.

Im Folgenden finden Sie ein Beispiel dafür, wie der fertige Code aussehen sollte:

Kehren Sie zum Editor zurück, klicken Sie mit der rechten Maustaste auf das Textelement, das Sie bearbeiten möchten, und klicken Sie auf „HTML/CSS bearbeiten“. Sie können dann die neue Schriftart auf Widgets in allen Geräten oder in bestimmten Geräteansichten mit dem CSS-Snippet in der folgenden Form anwenden: font-family: 'FONT-NAME' !important;. Beispielsweise haben wir für unsere Schriftart diese CSS-Codezeile hinzugefügt: font-family: 'inklandregular' !important;.

Auf diese Weise können Sie die Schriftart auf Absätze, Überschriften usw. anwenden. Wenn Sie benutzerdefinierte Schriftarten auf die Textelemente im Header anwenden möchten, tun Sie dies bitte im Entwicklermodus.

Schriftart auf bestimmte Website-Thema-Schriftarten anwenden

Um Ihre benutzerdefinierten Schriftarten auf Ihr Website-Thema anzuwenden, müssen Sie die spezifischen CSS-Elemente durch Ihren benutzerdefinierten Schriftnamen ersetzen. Führen Sie dafür die folgenden Schritte aus:

  1. Klicken Sie in der Navigationsleiste auf die Schaltfläche Entwicklermodus.
  2. Klicken Sie auf Webseiten HTML/CSS und dann auf site-theme.css.
  3. Suchen Sie nach der bestimmten Überschrift oder Schriftklasse, die Sie ändern möchten (z. B. H1, H2 usw.), und ersetzen Sie die aktuelle Schriftfamilie durch Ihren benutzerdefinierten Schriftnamen.
  4. Klicken Sie auf Speichern.
  5. Klicken Sie auf Schließen, um den Entwicklermodus zu schließen.

Die Schriftart über CSS anwenden

Um die von Ihnen eingebettete Schriftart als Thema-Schriftart Ihrer Website festzulegen, fügen Sie die folgende CSS-Zeile in die site.css ein. Weitere Informationen zum Hinzufügen von benutzerdefiniertem CSS finden Sie unter Entwicklermodus.

"*#dm div.dmContent *, *#dm div.dmFooter *, *#dm div.dm-title {IHR_GOOGLE_INTEGRATIONS_CODE}"

Ersetzen Sie IHR_GOOGLE_INTEGRATIONS_CODE oben durch den CSS-Code der Schriftfamilie, den Sie aus Google Fonts kopiert haben. Klicken Sie auf Speichern.

Die Schriftart auf ein bestimmtes Widget anwenden

So wenden Sie eine Schriftart auf ein einzelnes Widget an:

  1. Klicken Sie mit der rechten Maustaste auf das Widget und klicken Sie auf HTML/CSS bearbeiten, um das HTML/CSS-Bearbeitungsfenster des Widgets zu öffnen.
  2. Fügen Sie den CSS-Code der Schriftfamilie, den Sie in Schritt 2 oben zwischen den Klammern { } unter allgemeinem oder gerätespezifischen CSS gespeichert haben, hinzu.

Die Schriftart wird nun auf die Textelemente des Widgets angewendet, und Sie können den Inline-Editor verwenden, um wie gewohnt die Farben zu ändern und den Text zu bearbeiten.

Schriftart auf bestimmte Website-Thema-Schriftarten anwenden

Um Ihre benutzerdefinierten Schriftarten auf das Website-Thema anzuwenden, müssen Sie die spezifischen CSS-Elemente durch Ihren benutzerdefinierten Schriftartnamen ersetzen. Führen Sie dafür die folgenden Schritte aus:

  1. Klicken Sie in der Navigationsleiste auf die Schaltfläche Entwicklermodus.
  2. Klicken Sie auf Webseiten HTML/CSS und dann auf site-theme.css.
  3. Suchen Sie nach der bestimmten Überschrift oder Schriftklasse, die Sie ändern möchten (z. B. H1, H2 usw.), und ersetzen Sie die aktuelle Schriftfamilie durch Ihren benutzerdefinierten Schriftnamen.
  4. Klicken Sie auf Speichern.
  5. Klicken Sie auf Schließen, um den Entwicklermodus zu schließen.

Hinweise

  • IONOS unterstützt .woff2 nicht.
  • Achten Sie auf die Art und Weise, wie Glyphen in der Webversion Ihrer Schriftart dargestellt werden. Viele benutzerdefinierte Schriftarten bieten mehrere Versionen von Glyphen an. Bitte stellen Sie sicher, dass Ihre Schriftart korrekt gerendert wird, bevor Sie sie auf die Live-Website anwenden.
  • Benutzerdefinierte Schriftarten können die Leistung der Website und die Ladezeit verlangsamen, da die Schriftart heruntergeladen werden muss, bevor sie angezeigt werden kann. IONOS-Websites haben im Allgemeinen ein sehr hohes Ranking für Seitengeschwindigkeit, aber eine Verringerung der Seitenladegeschwindigkeit ist unvermeidlich, wenn zusätzliche Schriftarten auf die Website geladen werden. Ziehen Sie in jedem Fall in Betracht, ob die Verwendung benutzerdefinierter Schriftarten eine Verringerung der Seitengeschwindigkeit rechtfertigt.
  • Falls die benutzerdefinierte Schriftart aus verschiedenen Gründen nicht gerendert werden kann, sollten Sie in Erwägung ziehen, eine Fallback-Schriftart in Ihr CSS einzufügen.
  • Mit IONOS müssen Sie keine @media-Abfragen verwenden, um Schriftarten nur auf bestimmten Geräten anzuzeigen. Stattdessen können Sie einfach benutzerdefiniertes CSS pro Gerät hinzufügen.
  • Verwenden Sie nur Schriftarten, die für die Web-Einbettung und/oder kommerzielle Nutzung lizenziert sind. Die Nichteinhaltung der Lizenz eines Schriftarten-Besitzers stellt eine Verletzung seines Urheberrechts dar.