WordPress

Childtheme von TwentySeventeen mit anderer Schrift ausstatten

technology 2650382 1920

Die Typographie ist ein wesentliches Merkmal der Identität eines Auftritts in allen Medien. Besonders für Unternehmen spielt sie eine große Rolle, was den Webauftritt nicht ausschließt, zumal die technische Realisierung Bestandteil moderner Webstandards ist.

Für ein Projekt wurde das TwentySeventeen-Theme gewünscht, mit ein paar Anpassungen, die unter anderem auch die Beibehaltung der bisher verwendeten Schriftart betrafen.

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 angefordert und geladen. Um das zu vermeiden, in der functions.php des Child-Themes die Schrift wie folgt deaktivieren.

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 um eine andere Schrift umzusehen. Wie es 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 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;
}

Damit sind alle Elemente einbezogen. Einzig die Schriftschnitte (über font-weight und font-style wollen vielleicht an der einen oder anderen Stelle noch modifiziert werden.

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.