WordPress: Schriftart des Themes ändern

An allem ist eigentlich Horst Schulte dran schuld. Der hat in seinem Blog einen Artikel veröffentlicht, in dem er auf Schriftarten bei WordPress Themen eingeht und dass man so was auch ändern kann. Und außerdem gäbe es die Seite TypeWonder auf der man sehen könne wie die eigene Seite mit anderen Schriften aussieht. So was reizt zu eigenen Basteleien. Hier eine kurze Erklärung wie man ohne Plugins die Schriftart ändert.

Schriftart aussuchen mit Hilfe der Seite TypeWonder

Die Seite TypeWonder ist einfach zu bedienen. URL eingeben, Schriftart aussuchen und auf „Use“ klicken. Die Seite präsentiert sich anschließend in der neuen Schrift. Über „Get Code“ kann man dann Snippets herunterladen, um die Google-Font auf der eigenen Seite einzubinden. Google-Fonts sind natürlich auch eine Möglichkeit die Schriftart auf der Website zu ändern. Das kommt aber bei mir nicht in Frage. Ich speichere die Schriften lokal und ohne Google. Was nicht allzu schwer ist. Es gibt tausende Seiten, die erklären, wie man Google-Fonts loswird und durch die lokal gespeicherte Variante ersetzt. Diese Tutorials dienen als Basis für eigene Bastelarbeiten.

Nachdem man sich die passende Schriftart bei TypeWonder ausgesucht hat, besucht man den google-webfonts-helper. Über diese Seite lässt sich die ausgesuchte Schrift herunterladen. Dabei ist zu beachten, dass man alle benötigten Varianten aussucht. Ebenfalls erhält man dort den passenden CSS-Snippet für das Child-Theme. Was jetzt noch fehlt ist es die alte Schriftart gegen die neue Schriftart auszutauschen. Ich erkläre das an dem von mir genutzten Theme Harrison.

Original Schriftart aus Theme entfernen

Harrison nutzt die Schriftart „Barlow“, die lokal im Ordner assets\fonts\ gespeichert wird. Thomas Weichelbaumer bindet die Schrift über die functions.php des Themes ein. Genau auf dem gleichen Weg wird sie auch wieder entfernt. Martina Honecker erklärt das wunderbar. Nachfolgender Code hat auch diesen Artikel als Basis

function dequeue_parent_styles() {
  wp_dequeue_style( 'harrison-theme-fonts' );
}
add_action( 'wp_print_styles', 'dequeue_parent_styles' );

Eigene Schriftart im Theme laden

Was jetzt noch fehlt ist das Stylesheet für die neue Schriftart. Auch dafür gibt’s ein Snippet um es im Theme einzubinden.

function theme_enqueue_styles() { 
  $harrison_child_theme_version = wp_get_theme('harrison-child')->get( 'Version' );	
		  
  wp_enqueue_style( 'harrison-child-fonts', get_stylesheet_directory_uri() . '/assets/css/theme-fonts.css', false, $harrison_child_theme_version );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Schriftart im Gutenberg Editor ändern

Eigentlich reicht das schon. Die Seite präsentiert sich in der neuen Schrift. Doch es gibt da auch noch den Gutenberg Editor. Auch dort hat der Harrison. Macher die Schrift „Barlow“ verewigt. Mit nachfolgendem Code lässt sich das auch ändern.

function my_gutenberg_styles() { 
  $harrison_child_theme_version = wp_get_theme('harrison-child')->get( 'Version' );	
  
  wp_dequeue_style( 'harrison-theme-fonts' );

  wp_enqueue_style( 'harrison-child-fonts', get_stylesheet_directory_uri() . '/assets/css/theme-fonts.css', false, $harrison_child_theme_version );  
}
add_action( 'enqueue_block_editor_assets', 'my_gutenberg_styles', 13 );

Ich habe noch in meinem Child-Theme die CSS-Eigenschaft font-family für einige HTML-Elemente geändert. Das war es dann auch schon. Ich selbst habe mich für die Schrift Ubuntu entschieden, die jetzt hier auf meiner Seite zu sehen ist.