Bego Mario Garde

Landingpage mit anderem Font für die Überschrift

Ich möchte gerne auf meiner Website eine Landingpage hinzufügen. Zur Unterscheidung soll die Überschrift auf dieser Seite in einem anderen Webfont dargestell werden. Wie geht das?

Das ist eine recht 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 zum Beispiel 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. Deshalb „basteln“ wir uns hier selber eine Lösung:

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 aktuell 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 das Pull-Up-Feld „1 Family selected“ an. Dort findest du die CSS-Regel, mit der du die Schriftart einem 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 Landingpage 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 experimentieren. Gerade eine Landingpage sollte rasch geladen werden.


Beitrag veröffentlicht

in

Diese Website ist werbefrei, unabhängig und ohne kommerzielle Absichten.

Für kostenlosen Support wende dich bitte an das deutschsprachige WordPress-Support-Forum.

Code auf dieser Website wurde unter der General Public License GPLv2 veröffentlicht.

© Bego Mario Garde 2016–2024