Veel WordPress themes bieden allerlei opties aan in de Customizer om met het Font te spelen. Typisch zit een geheel eigen font (een custom font) in de betaalde versie van een theme. Om die regel te onzeilen pak je dan gauw een plugin die het denkwerk voor je uitzoekt.
Maar wat nu als de combo van theme en je font plugin niet blijkt te werken? Dat heb ik dus.
Ik gebruik vaak het Ocean theme. Maar die werkt niet goed samen met de plugin Custom Fonts. Maar als je je font met de hand in de Custom CSS van de Customizer zet, werkt het wel.
- Upload je font files en “onthou” de link. Je wilt een woff, een woff2 en een ttf bestand aanbieden. Er zijn converters genoeg.
- Als je WordPress de font files weigert te uploaden, moet je eerst zorgen dat de desbetreffende mine types worden toegestaan. Installeer de plugin WP Mime Types en voeg toe:
woff= font/woff
woff2= font/woff2
ttf=font/ttf- Gebruik deze “voorbeeld” code. Bedenk dat je de font naam en de URLs netjes aanpast
@font-face {
font-family: 'codenewroman';
src: url('/wp-content/uploads/2024/08/code-new-roman_regular.woff2') format('woff2'),
url('/wp-content/uploads/2020/09/code-new-roman_regular.woff') format('woff'),
url('/wp-content/uploads/2020/09/code-new-roman_regular.ttf') format('truetype');
/* font-weight: normal;
font-style: normal; */
}/* Use the custom font for all required styles, simply */
h1, h2, p , span, li, ol, label, div, code {
font-family: 'codenewroman', sans-serif;
}- Natuurlijk gebruik je de Inspector van je browser (F12) om de juiste CSS style te pakken van een element dat ik nog niet heb aangegeven.
- Om het laden van een font te testen kun je handig de plugin WhatFont gebruiken.
Veel plezier!
