
So ändern Sie die Schrift in WordPress
Anpassung der Schriftart (Fonts)
Warnung
Wir empfehlen Ihnen, Schriften stets lokal einzubinden, sprich herunterzuladen und in Ihrem Webspace abzulegen.
Die Nutzung von Schriften direkt von externen Quellen (also von anderen Servern aus Ihrem Webhosting-Paket, z.B. den Google-Servern) birgt nach aktuellen Gerichtsurteilen ein Datenschutz-Risiko. Weitere Informationen finde Sie z.B. hier
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
Achtung: Sollten Sie hier einen anderen Pfad oder Ordnernamen wählen, müssen Sie später den CSS-Code anpassen.
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 }
Font
Schriftart
Schriftfarbe
Schriftgröße
WordPress