google fonts lokal einbinden ohne plugin – Viator Digital Solutions

Aus aktuellem Anlass: So könnt Ihr google fonts lokal in WordPress einbinden:

Auf sicher3.de oder im Inspektor prüfen, ob Schriften von google geladen werden.
Falls ihr eine grüne Entwarnung bekommt, ist nichts weiter zu tun.
Bei einer roten Warnung: Geht am besten auf den google web font helper und die notwendigen Schriften herunterladen. Voreingestellt ist best support, damit werden dann je nach Anzahl der fonts die ihr verwendet mindestens 5 font Dateien heruntergeladen. Achtung: Den Tab nicht zu machen, ihr braucht später noch den passenden CSS Code von dieser Seite.
Im WordPress Backend die Schriften in die Medienbibliothek hochladen. Das ist der Ort wo ihr auch Eure Bilder und Logo Dateien hochladet.
In der Medienübersicht die URL der Font Datei in die Zwischenablage kopieren. Aus dieser URL brauchen wir nur den mittleren Teil als Dateipfad.

				
					**/ So ist die komplette URL zu der Font Datei **/

https://www.domain.de/wp-content/uploads/2022/10/roboto-v30-latin-italic.eot

				
					Relevant ist nur dieser Teil:

/wp-content/uploads/2022/10/

Zurück zum google web font helper und dort unter Customize folder prefix (optional):
In das Feld den o.s. Pfad reinkopieren. /wp-content/uploads/2022/10/
Danach den Code in die Zwischenablage kopieren.

				
					/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/2022/10/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/uploads/2022/10/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/uploads/2022/10/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/uploads/2022/10/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/uploads/2022/10/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/uploads/2022/10/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Zurück in Dein WordPress Backend und unter DESIGN>THEME DATEI EDITOR die stlye.css von Deinem Child Theme auswählen.
Dort den Code aus der Zwischenablage reinkopieren.
Danach zur Sicherheit in die functions.php gehen und dort folgenden Code Schnippsel reinkopieren.

				
					add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ );

Wer elementorPRO als Theme Builder benutzt, kann dies natürlich auch mit Elementor Bordmitteln lösen.