Gutenberg Typografie

Adobe Fonts im WordPress Block-Editor anzeigen

Für unser neuestes ElmaStudio Redesign haben wir die bei Adobe Fonts zur Verfügung stehenden Schriften Degular und Degular Display verwendet. Die Schriften ins Frontend einzubinden war auch kein Problem.

Dazu musste ich lediglich den von Adobe Fonts bereitgestellten Snippet in meinen Header einfügen. Um den Fontsnippet nicht bei einem Themeupdate zu verlieren, habe ich entschieden, das WordPress-Plugin Insert Headers and Footers zu installieren. So kann ich Codesnippets in den Header oder Footer-Bereich meiner Webseite einbinden. Das Plugin war dann auch noch für den Codesnippet unseres Helpscout-Badges hilfreich.

CSS Anpassung im Theme

Soweit so gut die Adobe Font wird geladen und ich kann sie über eine kleine Anpassung im CSS im Frontendbereich unsere Webseite nutzen. Die genötigte eigene CSS-Anpassung hierfür lautet:

:root {
	--global--font-primary: 'degular-display', sans-serif;
	--global--font-secondary: 'degular', sans-serif;
}

Sobald Global Styles in WordPress Standard werden (siehe WordPress 5.8 Update) wird die Integration von eigenen Schriften übrigens noch sehr viel einfacher.

Adobe Font in der Editor-Ansicht

Leider wird die Adobe-Schrift jetzt aber noch nicht im WordPress-Editor angezeigt. Dafür habe ich ein bisschen googeln müssen, bis ich eine improvisierte Lösung gefunden habe. Ich hoffe das sich das Verhalten noch verbessert, um meinen kleinen Hack nicht zu vergessen, wollte ich es aber doch kurz hier auf dem Blog teilen.

Der benötige Code, um meine Adobe Font auch im Editor sichtbar zu machen, muss in die functions.php des Themes eingefügt werden.

/**
 * Show Adobe font in editor
 */
add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'adobe-fonts', 'Your Adobe Webproject URL here' );
} );

Sobald ich eine bessere Lösung finde, werde ich den Beitrag updaten. Kennst du vielleicht schon eine bessere Umsetzung? Ich freue mich auf Kommentare und Tipps.

Kommentar hinzufügen

    1. Ups, sorry, jetzt ist der da! Wir haben gerade ein Design-Update veröffentlicht, daher ging es etwas rund her hier auf der Seite :)

  1. Hello Ellen,
    vielen Dank für den Beitrag. Zwei Fragen habe ich: Warum habt ihr die Adobe Fonts nicht lokal eingebunden? Ist das Laden über Adobe/typekit performanter? Und sollte die Verwendung der Adobe Fonts nicht in der/eurer Datenschutzerklärung erwähnt werden?
    Herzliche Grüße
    Jörg

    1. Hallo Jörg,

      es ist auf jeden Fall beides möglich, da wir unser Elmastudio-Webseite relativ schnell umziehen wollten, schien es ehrlich gesagt im Moment einfach nur die einfachste Lösung. Ich denke langfristig werde ich es einmal testen, ob ein lokales Einbinden nicht schneller ist. Herzlichen Dank zum Hinweis bzgl. der Datenschutzerklärung, ich habe diese gerade upgedatet (dort waren noch die Google Fonts angegeben).

      Viele Grüße,
      Ellen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.