Werken in WordPress van BURO210
Het probleem
Standaard ondersteunt WordPress in combinatie met Breakdance alleen webvriendelijke fontformaten zoals .woff en .woff2.
Maar soms krijg je van een designer een font aangeleverd als .ttf (TrueType Font), zoals bijvoorbeeld een variable font. Deze kun je niet direct uploaden of selecteren binnen Breakdance.
Toch is er een manier om dit netjes werkend te krijgen via een externe CSS-registratie.
De oplossing
We gaan het font handmatig registreren via CSS en vervolgens beschikbaar maken in Breakdance.
Stap 1: Font uploaden naar je theme
Upload je .ttf bestand naar je child theme, bijvoorbeeld:
/wp-content/themes/jouw-child-theme/fonts/
Bijvoorbeeld:
ZalandoSansSemiExpanded-VariableFont_wght.ttf
Stap 2: CSS bestand aanmaken voor font registratie
Maak een nieuw bestand aan:
/fonts/fonts-register.css
Voeg hierin het volgende toe:
@font-face {
font-family: 'Zalando Sans';
src: url('/wp-content/themes/jouw-child-theme/fonts/ZalandoSansSemiExpanded-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
Belangrijk:
font-family= naam die je straks gebruikt in CSS / Breakdanceformat('truetype')is verplicht voor.ttffont-weight: 100 900;werkt voor variable fonts
Stap 3: CSS bestand inladen in je theme
Open je style.css van je child theme en voeg toe:
@import url('./fonts/fonts-register.css');
Stap 4: Font beschikbaar maken in Breakdance
Ga in Breakdance naar:
- Preferences → Custom Fonts
Gebruik daar:
- Use Fonts In External CSS → Add CSS URL
Voeg je CSS bestand toe:
https://jouwdomein.nl/wp-content/themes/jouw-child-theme/fonts/fonts-register.css
Klik op Save Fonts
Structuur overzicht
Je project ziet er nu ongeveer zo uit:
/themes /jouw-child-theme /fonts fonts-register.css jouw-font.ttf style.css
Aandachtspunten
.ttfbestanden zijn vaak zwaarder dan.woff2→ kan performance beïnvloeden- Niet alle browsers zijn optimaal voor
.ttf→.woff2blijft voorkeur - Variable fonts werken goed, mits correct ingesteld (zoals
font-weight: 100 900)
