Schriftdateiformate – welches wofür?
Wenn Sie eine Schriftart kaufen, erhalten Sie normalerweise mehrere verschiedene Dateien. Dies liegt daran, dass verschiedene Browser (z. B. Internet Explorer, Safari, Chrome) unterschiedliche Schriftdateiformate verwenden, um den Text auf einer Website anzuzeigen.
Gängige Dateitypen sind WOFF und WOFF2. WOFF2 ist eine neuere, stärker komprimierte Version von WOFF. Je stärker eine Datei komprimiert ist, desto schneller wird eine Website geladen. Andere Schriftdateiformate für das Web sind EOT und SVG. Sie sind veraltet.
Für Desktop-Publishing (Verwendung einer Schriftart in Canva, Illustrator, Figma usw.) verwenden Sie OTF- oder TTF-Dateien. OTF ist besser als TTF, da es häufig Open Type-Funktionen (OTF) enthält. OpenType-Funktionen sind beispielsweise alternative Zeichen, Ligaturen und Brüche.
Wenn Sie eine Schriftart von Mojomox kaufen, können Sie aus der Dropdown-Liste „OTF“ oder „WOFF/2“ auswählen. Wenn Sie die Schriftart in einer Designsoftware (Illustrator, Figma, Canva usw.) UND auf einer Website verwenden möchten, müssen Sie beides kaufen – OTF und WOFF/2.
Für reine Websites reicht der Kauf des WOFF/2-Formats aus.
Entpacken Sie den Schriftartordner
Nachdem Sie eine Schriftart im WOFF/2-Format gekauft haben, erhalten Sie einen Link zum Herunterladen eines ZIP-Ordners. Nach dem Herunterladen doppelklicken Sie auf den Ordner oder klicken Sie mit der rechten Maustaste darauf, um ihn zu entpacken. Jetzt haben Sie zwei Dateien, eine WOFF- und eine WOFF2-Datei.
Hinzufügen einer benutzerdefinierten Schriftart zu einem Wordpress-Design
Für Wordpress können Sie entweder ein Plugin verwenden, um benutzerdefinierte Schriftarten hinzuzufügen, oder Sie können den Code manuell zu Ihren Wordpress-Designdateien hinzufügen.
Option 1: Benutzerdefinierte Schriftart über Plugin verwenden
Wenn Sie lieber Plugins verwenden, lesen Sie hier auf der Support-Seite von Wordpress mehr darüber: https://wordpress.com/support/custom-fonts/#upload-custom-fonts
Option 2: Benutzerdefinierte Schriftart über manuellen Codeausschnitt verwenden
Wenn Sie die manuelle Methode bevorzugen, müssen Sie drei Dinge hinzufügen:
1) Laden Sie Schriftdateien (WOFF und WOFF2) in Ihr Wordpress-Verzeichnis hoch (manchmal gibt es einen Schriftartenordner, aber jeder Ordner funktioniert, Sie müssen nur den Link dazu erhalten).
2) Fügen Sie in Ihrer style.css (oder einer anderen CSS-Datei, die Sie haben) den Code @font-face hinzu (Details im Link unten).
3) Weisen Sie dem HTML die Schriftart zu (z. B. dem Textkörper oder nur den Überschriften).
Detaillierte Screenshots mit Beispielen zu den drei oben genannten Punkten finden Sie hier: https://www.hostinger.com/tutorials/how-to-add-custom-fonts-to-wordpress#How_to_Manually_Add_Fonts_to_WordPress
Fragen? Schicken Sie mir eine E-Mail an saskia@mojomox.com mit einem Link zu Ihrer Site und ich kann Ihnen mit dem Code helfen.
