Das ist eine sehr spezielle Anforderung:
- eine bestimmte Schriftart
- für eine bestimmte Überschrift
- auf nur einer Seite
Die Plugins im WordPress-Verzeichnis sollen meistens ein breites Anwendungsspektrum abdecken. Mit dem Plugin Easy Google Fonts kannst du zwar Google Webfonts einbinden und einem bestimmten CSS-Selektor zuweisen, aber der Font wird dann auf jeder Webseite geladen, auch wenn er gar nicht gebraucht wird.
Da du nicht geschrieben hast, welche Seite anders aussehen soll, nehmen wir als Beispiel einfach mal die „Über uns“-Seite. 🙂
Ein Rechstklick auf die erste Überschrift > Element untersuchen zeigt folgendes HTML:
<h3 class="h-custom-headline h3">
<span>Wir machen (fast) Alles möglich!</span>
</h3>
Außerdem sieht das Body-Tag so aus:
<body class="page-template page page-id-69">
(ich habe das etwas gekürzt, weil für uns nur die CSS-Klasse mit der Seiten-ID wichtig ist: page-id-69)
Nehmen wir nun an, du möchtest als Schriftart den Google Webfont Lobster verwenden. Auf der Webseite von Google klickst du den roten Schriftzug (+) Select this font an und schaust dir dann im Pull-Up-Feld „1 Family selected“ an. Dort findest du die CSS-Regel, mit der du die Schriftart einen Selektor zuweist:
font-family: 'Lobster', cursive;
Daraus ergibt sich folgende CSS-Regel, die du im Customizer unter Zusätzliches CSS eingibst:
.page-id-69 h3.h-custom-headline {
font-family: 'Lobster', cursive;
}
Wenn du vermeiden möchtest, dass auf dieser Seite weitere <h3>-Zwischenüberschriften mit der gleichen CSS-Klasse auch die gleiche Schrift zugewiesen bekommen, solltest du die Seite im Textmodus bearbeiten* und im <h3>-Tag der Überschrift noch eine weitere CSS-Klasse einfügen, also z.B. <h3 class="h-custom-headline h3 lobster"> (*ggf. geht das auch im Page Builder). Außerdem packen wir gleich noch eine Regel für eine größere Schriftgröße dazu. Die dazugehörige CSS-Regel lautet dann:
.page-id-69 h3.lobster {
font-family: 'Lobster', cursive;
font-size: 42px;
}
Durch Verwendung der CSS-Klasse .page-id-69 gilt die Schriftart nur für diese eine Seite. Im Customizer solltest du nach Hinzufügen dieser Regel auch schon eine erste Änderung feststellen: die Überschrift wird kursiv dargestellt, aber noch nicht mit der richtigen Schriftart, weil wir diese noch nicht geladen haben.
Um die Schriftart zu laden, müssen wir WordPress erst einmal mitteilen, wo es den Font herbekommt und wie WordPress diesen Font einbetten (engl. „to enqueue“) soll. Dazu brauchen wir eine PHP-Funktion, die du entweder in die functions.php eines Child Themes oder – falls du (noch?) kein Child Theme hast – mit dem Plugin Code Snippets als neues Snippet hinzufügen kannst.
Die Funktion sieht so aus:
add_action( 'wp_enqueue_scripts', 'pix_google_lobster' );
function pix_google_lobster() {
wp_register_style( 'google_lobster', '//fonts.googleapis.com/css?family=Lobster', array(), null );
wp_enqueue_style( 'google_lobster' );
}
Der Nachteil dieser Funktion ist, dass der Font noch überall geladen wird, obwohl wir ihn doch nur auf der Seite mit der ID 69 benötigen (die ID haben wir vorher im <body>-Tag gesehen). Deshalb erweitern wir unsere Funktion mit einem if-Statement und dem Conditional Tag is_page():
add_action( 'wp_enqueue_scripts', 'pix_google_lobster' );
function pix_google_lobster() {
wp_register_style( 'google_lobster', '//fonts.googleapis.com/css?family=Lobster', array(), null );
if( is_page( 69 ) ) { // nur auf Seite mit ID 69 laden!
wp_enqueue_style( 'google_lobster' );
}
}
Jetzt sollte alles passen und die Überschrift der „Über uns“-Seite in der Schriftart Lobster angezeigt werden, währen die anderen Seiten den Webfont gar nicht erst laden. Achte aber bitte darauf, dass jeder zusätzliche Webfont die Ladezeiten beeinträchtigt. Als Alternative könntest du mit anderen Schriftgrößen, -schnitten und -farben exxperimentieren. Gerade eine Landingpage sollte rasch geladen werden.
