Wordpress - Google Fonts statisch einbinden

Aus Wikizone
Wechseln zu: Navigation, Suche

Aus Datenschutzgründen sollte man Google Fonts statisch auf dem Server seines Vertrauens vorhalten. Doch wie entfernt man Sie aus Wordpress Themes?

Die Fonts werde aus den Einstellungen des Themes meist über die functions.php und die wp_head Funktion geladen. Dabei findet man in

Wo sucht man?

header.php

<?php wp_head();?>

etwas in der Art. Das ist ein sehr wichtiger Hook in WP über den alles mögliche geladen werden kann.

In functions.php wird es konkret. Hier finden wir etwas in der Art:

wp_enqueue_style('googleFontbody', 'http://fonts.googleapis.com/css?family='.$font_body ,'',NULL);

Hier wird also ein Stylesheet von Google in die Warteschlange gestellt, die dann später an der Stelle von wp_head() eingefügt wird. Außerdem stellen wir ein eigenes Stylesheet für unser Child Theme in den Queue um damit unsere Fonts einzubinden.

Google Fonts entfernen und Stylesheet einbinden

Um diese Styles wieder loszuwerde registrieren wir im ChildTheme einfach eine eigene Funktion und schmeißen über diese die Google Styles wieder aus der Warteschlange.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

function my_deregister_styles() {
    wp_deregister_style( 'googleFontbody' );// no google font scripts
}

Die Fonts kommen in einen Ordner "fonts" im Child Theme und können So referenziert werden:

/* oswald-regular - latin */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('fonts/oswald-v35-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('fonts/oswald-v35-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
...

Die Styles können dann wie üblich mit font-family gesetzt werden

body{font-family: Oswald,sans-serif;}

Tipp: Mit welchem Bezeichner der Style im Queue steht sieht man u.U. auch direkt am Style

<link rel='stylesheet' id='googleFontQuote-css'  href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic' type='text/css' media='all' />

steht für einen Bezeichner googleFontQuote also muss die Zeile heißen:

wp_deregister_style( 'googleFontQuote');