google fonts lokal einbinden ohne plugin

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.