Childtheme von TwentySeventeen mit anderer Schrift ausstatten

Die Typographie ist ein wesentliches Merkmal der Identität eines Auftritts in allen Medien. Besonders für Unternehmen spielt sie eine große Rolle. Verständlich, dass auch der Webauftritt das widerspiegeln soll. Die technische Realisierung ist schließlich Bestandteil moderner Webstandards.

Für ein Projekt wurde das TwentySeventeen-Theme gewünscht, mit ein paar Anpassungen, die unter anderem auch die Integration der vom Kunden gewünschten Schriftart vorsah.

TwentySeventeen ist das aktuelle Standardtheme von WordPress (wie es aussieht, bleibt es auch noch eine Weile so) und darauf ausgelegt, als Business-Theme eingesetzt zu werden. Seine Flexibilität macht es allerdings breit einsatzfähig, und sorgte auch dafür, dass es mit über einer Million Downloads als recht beliebt angesehen werden kann.

Als Schriftart verwendet es Libre Franklin, die bei Google Fonts gehostet wird.

Natürlich kann man die Font-Stile einfach überschreiben. Allerdings würde dann die Theme-Schrift immer noch von Google angefordert und geladen. Um das zu vermeiden, in der functions.php des Child-Themes die Schrift wie folgt deaktivieren.

Die Schrift aus TwentySeventeen enfernen

function mychildtheme_at_remove_libre_franklin() {
      wp_dequeue_style( 'twentyseventeen-fonts' );
}

add_action( 'wp_print_styles', 'mychildtheme_at_remove_libre_franklin' );

Nun ist die Bahn frei, Schriften entweder selbst einzubetten oder sich bei Google Fonts nach einer anderen Schrift umzusehen. Wie Einbinden einer Schrift von Google geht, zeigt ja bereits TwentySeventeen.

Child-Theme Stile

Die style.css des Childthemes wird über get_stylesheet_uri() bereits vom Parent eingebunden. Was es ggf. jedoch braucht ist die CSS-Datei von TwentySeventeen. Daher hole ich in diesem Beiespiel nicht nur die Google-Schrift, sondern auch die CSS-Datei von TwentySeventeen, da sich neben der Schrift am Design der Website für die das Childtheme bestimmt ist, nicht viel ändern wird.

function mychildtheme_enqueue() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
	wp_enqueue_style( 'mychildtheme-fonts', mychildtheme_fonts_url(), array(), null );
}

add_action( 'wp_enqueue_scripts', 'mychildtheme_enqueue' );

Font-URL bei Google zusammensetzen

function mychildtheme_fonts_url() {
	$fonts_url = '';

	$font_families = array();

	/* aus Performancegründen nur die Schnitte einbeziehen, die auch tatsächlich Verwendung finden */
	$font_families[] = 'Raleway:100,300,300i,400,600,700';

	$query_args = array(
		'family' => urlencode( implode( '|', $font_families ) ),
		'subset' => urlencode( 'latin,latin-ext' ),
	);

	$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

	return esc_url_raw( $fonts_url );
}

Preconnect herstellen

function mychildtheme_resource_hints( $urls, $relation_type ) {
	if ( wp_style_is( 'mychildtheme-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
		$urls[] = array(
			'href' => 'https://fonts.gstatic.com',
			'crossorigin',
		);
	}

	return $urls;
}
add_filter( 'wp_resource_hints', 'mychildtheme_resource_hints', 10, 2 );

Schrift in der style.css des Childthemes definieren

body,
button,
input,
select,
textarea {
    color: #333;
    font-family: Raleway, "Helvetica Neue", helvetica, arial, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.66;
}

/* Placeholder text color -- selectors need to be separate to work. */

::-webkit-input-placeholder {
    color: #333;
    font-family: Raleway, "Helvetica Neue", helvetica, arial, sans-serif;
}

:-moz-placeholder {
    color: #333;
    font-family: Raleway, "Helvetica Neue", helvetica, arial, sans-serif;
}

::-moz-placeholder {
    color: #333;
    font-family: Raleway, "Helvetica Neue", helvetica, arial, sans-serif;
    opacity: 1;
    /* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
    color: #333;
    font-family: Raleway, "Helvetica Neue", helvetica, arial, sans-serif;
}

Im Gegensatz zu Themes aus anderen Quellen haben WordPress-Originale den Vorteil, sehr lange gepflegt zu werden. Zudem sind sie einfach, und müllen einem nicht das Dashboard mit unerwünschten Belanglosigkeiten voll. Mit ggf. etwas Javascript und CSS lässt sich so gut wie jedes unkomplizierte Theme nahezu beliebig anpassen.

Letztendlich haben wir die Schriften allerdings downgeloaded und selbst auf dem Webserver gehostet. Die Google-Font-Funktionen fielen damit weg.

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url('fonts/raleway-v12-latin-regular.woff2') format('woff2'),
    url('fonts/raleway-v12-latin-regular.woff') format('woff');}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url('fonts/raleway-v12-latin-700.woff2') format('woff2'),
    url('fonts/raleway-v12-latin-700.woff') format('woff');
}