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.
The post Adobe Fonts im WordPress Block-Editor anzeigen first appeared on ElmaStudio.