Schriftart für WordPress-Webseite lokal hosten [Pre-FSE]

Aktualisiert am 15. Oktober 2021

In meinem ersten Tutorial zeige ich, wie man eine (das geht aber auch mit mehreren) Schriftart aus der Google Fonts-Bibliothek lokal hostet und dann in das Theme für WordPress einbindet.

Dieses Tutorial ist nur für klassische WordPress-Themes geeignet, die nicht für Full Site Editing ausgelegt sind!

Schritt 1 – Schriftart auswählen und herunterladen:

Man sucht sich auf der Webseite „google webfonts helper“ eine passende Schriftart, zum Beispiel die hier verwendete „Quicksand“, aus. Dort erhält man dann praktischerweise das Schriftartpaket mit sämtlichen benötigten Formaten und Stärken (hier 300, 400 – Regular, 500 und 700) der Schriftart zum Download sowie den CSS-Code zum Einbinden auf seiner Webseite. Wenn der lokale Ordner wie in Schritt 2 angegeben angelegt wird, trägt man dort im Feld „Customize folder prefix (optional):“ folgendes ein:

https://www.deine-domain.de/fonts/

„deine-domain“ muss natürlich mit dem Namen der eigenen Domain ersetzt werden.


Nach dem Herunterladen die zip-Datei entpacken.

Schritt 2 – Schriftart auf den Webserver hochladen:

Im Hauptverzeichnis von WordPress auf dem Server einen Ordner namens „fonts“ anlegen. Man könnte diesen Ordner auch im Unterverzeichnis des Themes ablegen, aber es könnte passieren, dass der Ordner beim Theme-Update gelöscht wird. In diesen Ordner die entpackten Dateien (alles was mit .eot, .woff., woff2, .ttf und .svg endet) hochladen.

Schritt 3 – Im Customizer des Themes die Schriftart einbinden:

Damit nun, wenn man das Aino-Theme verwendet, tatsächlich im Hintergrund keine Verbindung zu Google für Schriften hergestellt wird, deaktiviert man über den Customizer/Theme-Optionen/Typografie die Google-Fonts im Theme.
Mit folgendem CSS-Code wird die Schriftart dann im Customizer in der Rubrik „Zusätzliches CSS“ in die Webseite eingebunden.

/* quicksand-300 - latin */ @font-face {   font-family: 'Quicksand';   font-style: normal;   font-weight: 300;   src: url('https://www.deine-domain.de/fonts/quicksand-v22-latin-300.eot'); /* IE9 Compat Modes */   src: local(''),        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-300.woff2') format('woff2'), /* Super Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-300.woff') format('woff'), /* Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */ } 

/* quicksand-regular - latin */ @font-face {   font-family: 'Quicksand';   font-style: normal;   font-weight: 400;   src: url('https://www.deine-domain.de/fonts/quicksand-v22-latin-regular.eot'); /* IE9 Compat Modes */   src: local(''),        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-regular.woff') format('woff'), /* Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */ } 

/* quicksand-500 - latin */ @font-face {   font-family: 'Quicksand';   font-style: normal;   font-weight: 500;   src: url('https://www.deine-domain.de/fonts/quicksand-v22-latin-500.eot'); /* IE9 Compat Modes */   src: local(''),        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-500.woff2') format('woff2'), /* Super Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-500.woff') format('woff'), /* Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */ } 

/* quicksand-700 - latin */ @font-face {   font-family: 'Quicksand';   font-style: normal;   font-weight: 700;   src: url('https://www.deine-domain.de/fonts/quicksand-v22-latin-700.eot'); /* IE9 Compat Modes */   src: local(''),        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-700.woff') format('woff'), /* Modern Browsers */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */        url('https://www.deine-domain.de/fonts/quicksand-v22-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */ }

Damit weiß das Sylesheet schonmal wo sich die Schrift befindet.

Schritt 4 – Schriftart anwenden:

Jetzt noch dafür sorgen, dass die Schrift auch benutzt wird:

/* Schriftart auf der Seite anwenden*/
 body, h1, h2, h3, h4, h5, h6 {
     font-family: 'Quicksand', sans-serif;
 }
.loadmore, .comment-respond input[type="submit"] {
     font-family: 'Quicksand', sans-serif;
 }
 input {
     font-family: 'Quicksand', sans-serif;
 }
 .entry-content .search-submit {
     font-family: 'Quicksand', sans-serif;
 }

Das Schöne bzw. Praktische am Customizer ist, dass man sofort sieht, ob es geklappt hat oder nicht.


Hinterlasst mir gerne ein Feedback und/oder Verbesserungsvorschläge zu diesem Tutorial unten in den Kommentaren! 😊

Das Ganze geht allerdings auch etwas einfacher indem man sich mit einem Plugin behilft und nach dieser Anleitung von Ellen Bauer vorgeht.

Bildquelle: pixabay

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.