So ändern Sie die Schrift in WordPress

Anpassung der Schriftart (Fonts)

Warnung

Vorwort

Wenn Sie Ihre WordPress Schrift ändern möchten und der gewünscht Font nicht in der Standard-Installation vorhanden ist, müssen Sie die Font-Dateien von einem externen Anbieter downloaden und anschließend auf Ihren Server oder Ihr Webhosting-Paket hochladen.

Download der Fonts

Unter folgendem Link können Sie sich direkt von Google diverse Fonts herunterladen. Hier werden Ihnen die Fonts als .zip-Archiv zur Verfügung gestellt.

Upload der Fonts

Innerhalb Ihres Webhosting-Paketes stehen Ihnen zwei Möglichkeiten zur Verfügung. Zum einen SSH und zum anderen FTP. Wenn Sie die Dateien per FTP hochladen möchten, müssen Sie das Archiv vorher auf Ihrem Endgerät Entpacken. Das nachträgliche Entpacken per FTP ist leider nicht möglich.

Sobald Sie die Font-Dateien vorbereitet haben und mit dem Server verbunden sind, empfehlen wir, einen neuen Ordner mit dem Namen "fonts" direkt im Root-Ordner Ihrer WordPress anzulegen.

/home/sites/site100000xxx/web/WordPress-Ordner/fonts

Einrichtung der Schriftart

Variante 1: Über die Einstellungen Ihres Themes

Die Einrichtung der Schriftart ist leider von Theme zu Theme unterschiedlich. Aus diesem Grund können wir Ihnen nur den ungefähren Weg nennen.

Sobald Sie in der Administrationsoberfläche Ihrer WordPress angemeldet sind, landen Sie über Klicks auf die Navigationspunkte

• Design -> Themes -> Customizer

in den Einstellungen des aktiven Themes. Hier müssen Sie nach dem Konfigurationspunkt suchen, welcher es Ihnen ermöglicht, den Font anzupassen. In der Regel nennt sich dieser Punkt Typografie.

Variante 2: Über Cascading Style Sheets (CSS)

Da der zuvor genannte Weg leider nicht konsistent ist, nennen wir Ihnen gerne auch einen Weg, welcher bei fast allen Themes funktioniert.

In den oben genannten Customizer-Optionen befindet sich ein Punkt

• Zusätzliches CSS

Durch einen Klick auf diesen Punkt öffnet sich ein kleines Fenster, in welchem Sie die Fonts einbinden können.

@font-face {
  font-family: '$IhrFont';
  font-style: normal;
  src: url('https://IhreDomain.de/fonts/$IhrFont.eot');
  src: local(''),
       url('https://IhreDomain.de/fonts/$IhrFont.eot?#iefix') format('embedded-opentype'),
       url('https://IhreDomain.de/fonts/$IhrFont.woff2') format('woff2'),
       url('https://IhreDomain.de/fonts/$IhrFont.woff') format('woff'),
       url('https://IhreDomain.de/fonts/$IhrFont.ttf') format('truetype'),
       url('https://IhreDomain.de/fonts/$IhrFont.svg#MouseMemoirs') format('svg');
}

Mit dem oben genannten Code binden Sie die Fonts in Ihre Wordpress ein. Um nun den Font auch für Ihren Text zu aktiveren, müssen Sie folgenden Code verwenden:

* { font-family:"$IhrFont"; }

Hier gibt es jedoch auch diverse andere Konfigurationsmöglichkeiten.

Anpassung der Schriftgröße

Um die WordPress Schriftgröße ändern zu können, empfehlen wir wie bereits bei den Fonts die Option Zusätzliches CSS. Hier können Sie mit der Anweisung font-size die Größe der Fonts definieren.

Anpassung der Header:

h1, h2, h3, h... { font-size: 20px; }

Anpassung der Texte:

p { font-size: 20px; }

Anpassung der vollständigen Seite:

* { font-size: 20px; }

Anpassung der Schriftfarbe

Auch die WordPress Schriftfarbe ändern ist mit den Cascading Style Sheets - Optionen kein Problem. Hierzu müssen Sie die bereits bekannte font-size Anweisung zu color ändern und den Hex Code der gewünschten Farbe angeben.

Anpassung der Header:

h1, h2, h3, h... { color: #3f84dd ;}

Anpassung der Texte:

p { color: #3f84dd ; }

Anpassung der vollständigen Seite:

* { color: #3f84dd }