Sinds de introductie van webfonts / weblettertypes in 2009 kunnen webdesigners profiteren van een rijke verzameling typografische paletten. Deze lettertypes werden grotendeels gebruikt via de CSS @fontface at-rule, waardoor ontwerpers een manier hadden om los te komen van web-safe (systeem) lettertypes.
Er waren (en zijn) verschillende lettertypebestandsindelingen beschikbaar van grote lettertype-producenten, met name Google Fonts.
In die tijd betekende het gebruik van webfonts dat je moest werken met aparte bestanden voor elk gewicht en elke stijl. Bestandsnamen zoals de volgende maakten bijvoorbeeld duidelijk hoe het lettertype in gebruik zou worden weergegeven:
Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttfElke variatie moest dan als een eigen bestand worden geladen. Dit maakte de pagina zwaarder, vereiste meer HTTP verzoeken en maakte het kiezen en toepassen van lettertypen in een ontwerp ingewikkelder.
De opkomst van variabele lettertypen
In 2016 kwam er een grote doorbraak in digitale typografie: variabele lettertypes. Ze zijn gezamenlijk ontwikkeld door Google, Apple, Adobe en Microsoft en zijn snel doorgedrongen tot de mainstream.
Het onderscheidende kenmerk van een variabel lettertype is dat het elk van de volgende elementen kan bevatten, die elk een axis worden genoemd:
| CSS axis | CSS property |
| weight | font-weight |
| style | font-style: italic |
| slant | font-style: oblique |
| stretch | font-stretch |
| Optical Size axis (opsz) | font-variations-setting |
Het meest gebruikte bestandsformat is .woff2 (Web Open Font Format), een sterk gecomprimeerd format dat in 2018 een W3C-aanbeveling werd. Hoewel formats zoals .ttf en .otf kunnen worden gebruikt als variabel lettertype, is het meest efficiënte format .woff2. Alle moderne browsers ondersteunen variabele lettertypen.
Voor de duidelijkheid maken we hier onderscheid tussen “webfonts” en “variabele lettertypes”. In de praktijk zie je echter vaak variabele lettertypes op één hoop gegooid worden met webfonts.
Waarom variabele lettertypes gebruiken?
Er zijn drie belangrijke redenen om variabele lettertypes te gebruiken in je projecten:
- Betere prestaties: In plaats van meerdere aparte lettertypebestanden aan te roepen (Regular, Bold, Italic, enz.), kan één variabel lettertypebestand ze allemaal dekken. Dat betekent minder HTTP verzoeken en snellere laadtijden.
- Ontwerpflexibiliteit: Variabele lettertypes geven je veel betere controle. In plaats van vast te zitten aan
font-weight: 500of600kun je bijvoorbeeld een aangepaste waarde instellen zoals532. - Responsieve typografie: Omdat variabele lettertypes zich soepel kunnen aanpassen, kun je typografie maken die reageert op verschillende apparaten. Een goed voorbeeld:
font-weight: clamp()gebruiken om het gewicht te schalen tussen viewports, zonder de abrupte “sprongen” die je zou krijgen met statische lettertypebestanden.
Hoe WordPress variabele lettertypen gebruikt
Met de release van WordPress 6.1 in november 2022 werd ondersteuning voor variabele lettertypen toegevoegd aan het theme.json systeem. De eerste demonstratie hiervan was in het Twenty Twenty-Three thema.
Een thema aanpassen met variabele lettertypen
Wanneer we werken met een childthema van TT5, beginnen we met het enqueen van de stijlen van zowel het parent- als childthema.
Om ervoor te zorgen dat onze custom lettertypes consistent verschijnen in zowel de editor als op de front-end, enqueuen we ook een fonts.css bestand dat de benodigde @font-face declaraties bevat.
<?php
// enqueue parent and child styles
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style'),
wp_get_theme()->get('Version')
);
// enqueue custom fonts
wp_enqueue_style(
'child-fonts',
get_stylesheet_directory_uri() . '/fonts.css',
array(),
wp_get_theme()->get('Version')
);
});Zoals altijd hangt het van het thema zelf af hoe je scripts enqueet. Er is niet één standaardmethode.
Om er zeker van te zijn dat we ons childthema goed hebben ingesteld, voeren we deze test uit in styles.css:
body { background: #0000ff; }Lettertypen toevoegen met theme.json
TT5 bevat standaard al twee variabele lettertypen: Manrope en Fira Code. Laten we voor dit voorbeeld Vollkorn toevoegen en dit het standaard lettertype voor headers maken met een gewicht van 600.
Hier is het relevante deel van theme.json:
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"fontFamily": "Manrope",
"src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
"fontWeight": "200 800",
"fontStyle": "normal"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"fontFamily": ""Fira Code"",
"src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
"fontWeight": "300 700",
"fontStyle": "normal"
}
]
},
{
"name": "Vollkorn",
"slug": "vollkorn",
"fontFamily": "Vollkorn, serif",
"fontFace": [
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "normal"
},
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "italic"
}
]
}
],
"customFontSize": true,
"fluid": true
}
},
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|manrope"
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|vollkorn",
"fontWeight": "600"
}
}
}
}
}Het resultaat is het verschijnen van het Vollkorn lettertype op de hele site.
Een aantal dingen om op te merken:
- Misschien wil je de Manrope en Fira codebestanden naar je child kopiëren voor het geval TT5 wordt bijgewerkt met nieuwe paden naar de bestanden.
- Het lijkt misschien dat de code voor deze lettertypen overbodig is, omdat ze al geregistreerd zijn door het parentthema. Toch is het belangrijk om ze te declaren in je childthema. Dit zorgt ervoor dat ze correct worden weergegeven in de Font Library UI en beschikbaar blijven, zelfs als het parentthema wordt bijgewerkt met nieuwe bestandspaden of wijzigingen.
- We verwijzen naar twee verschillende Vollkorn bestanden.
Zorgen dat lettertypen correct laden
Soms worden lettertypen niet goed weergegeven op de voorkant totdat je ze hebt gedeclared in CSS. Hier is een typische styles.css:
/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/
/* Ensure fonts are loaded and applied */
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}
code,
pre {
font-family: 'Fira Code', 'Courier New', monospace;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Vollkorn', 'Times New Roman', serif;
}En in fonts.css declaren we de lettertypebestanden met @font-face. Dit zorgt ervoor dat de browser weet welke lettertypen geladen en toegepast moeten worden. Als je echt kritieke lettertypen wil preloaden (bijvoorbeeld het lettertype van je primaire header), kun je ook een <link rel="preload"> toevoegen aan de <head> van de site via WordPress hooks. In de meeste gevallen biedt de regel @font-face met font-display: swap een goede balans tussen prestaties en gebruikerservaring.
/* Preload critical fonts for better performance */
@font-face {
font-family: 'Manrope';
src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}Het resultaat is een pagina waar de koppen standaard Vollkorn zijn met een lettertypegewicht van 600.
Als je dat liever hebt, kun je de @font-face at-regels opnemen in styles.css. Dit zou ook de noodzaak wegnemen om het bestand fonts.css te enqueuen.
Het gebruikers gemakkelijk maken om lettertypegewichten te kiezen
Een van de grootste voordelen van variabele lettertypes is dat gewichten niet beperkt zijn tot vaste stappen zoals 400 of 600. Je kunt elke waarde tussen 100-900 gebruiken. Het addertje onder het gras is dat WordPress geen UI biedt voor het kiezen van deze custom gewichten.
Om dit op te lossen hebben we een minimale plugin gemaakt met de naam Font Weight Options. Deze voegt een instellingenpagina toe onder Appearance > Font Weight, waar je custom gewichten kunt definiëren voor bodytekst, headers en codeblokken.
Hier is een verkorte weergave van de kernlogica:
<?php
/**
* Plugin Name: Font Weight Options
*/
class Font_Weight_Options {
public function __construct() {
add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
}
public function add_admin_menu() {
add_theme_page(
__( 'Font Weight Settings', 'font-weight-options' ),
__( 'Font Weight', 'font-weight-options' ),
'manage_options',
'font-weight-settings',
array( $this, 'render_admin_page' )
);
}
public function apply_font_weights_frontend() {
$weights = get_option( 'fwo_font_weights', array(
'body' => 400,
'headings' => 600,
'code' => 400,
) );
echo "<style>
body { font-weight: {$weights['body']} !important; }
h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
code, pre { font-weight: {$weights['code']} !important; }
</style>";
}
}
new Font_Weight_Options();Het bovenstaande fragment toont de kernlogica. We hebben de volledige broncode gepubliceerd op GitHub Gist als je de volledige plugin wilt zien, inclusief het instellingenformulier en de validatie.
De volledige versie voegt toe:
- Standaard waarden bij het activeren van de plugin
- Een eenvoudig admin-instellingenformulier met nummervelden (100-900)
- Validatie om waarden binnen bereik te houden
- Uitvoer van de gewichten in zowel de blokeditor als de frontend
Het resultaat is deze nieuwe pagina in onze WP Admin, waarmee gebruikers waarden voor het lettertypegewicht kunnen instellen voor onze drie lettertypen. We hebben drie “niet-standaard” waarden gekozen.
Het resultaat is een pagina met deze corresponderende lettertypegewichten die worden weergegeven zoals verwacht in de pagina-editor en front-end.
Een vriendelijkere, eenvoudigere manier om een enkel variabel lettertype toe te voegen
Als je dit allemaal teveel vond, hebben we een alternatief dat niet volledig is, maar wel een snelle manier is om elk type lettertype in je thema te krijgen.
Gebruikers kunnen eenvoudig Google Fonts toevoegen via de lettertypenbibliotheek. Als dat je voorkeur heeft, kijk dan eens naar ons artikel over 15 beste Google lettertypen volgens de statistieken (plus tips om ze te gebruiken), dat je zal helpen.
Maar wat als je de voorkeur geeft aan iets anders dan een Google Font? Er zijn veel manieren om open source lettertypen met de juiste licenties te krijgen voor je projecten. Wij gingen naar GitHub om SourceSans3VF-Upright te krijgen, een Adobe lettertype.
Ons doel is om dit te gebruiken als optioneel lettertype dat correct wordt weergegeven in de editor en frontend.
Het lettertypebestand is geplaatst in de map /assets/fonts van ons childthema. Van daaruit hebben we functions.php gemaakt.
<?php
/**
* Enqueue parent and child theme styles.
*/
function twentytwentyfive_kinstachild_enqueue_styles() {
// Parent theme style.
wp_enqueue_style(
'twentytwentyfive-style',
get_parent_theme_file_uri( 'style.css' ),
array(),
wp_get_theme()->get( 'Version' )
);
// Child theme style.
wp_enqueue_style(
'twentytwentyfive-child-style',
get_stylesheet_uri(),
array( 'twentytwentyfive-style' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );
/**
* Enqueue child theme styles in the editor.
*/
add_action( 'after_setup_theme', function() {
add_editor_style( 'style.css' );
} );Net als in het vorige voorbeeld moet ons theme.json bestand verwijzen naar de Manrope en Fira Code van de parent. Als we die weglaten, verwijderen we ze uit ons thema.
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
}
]
},
{
"name": "Source Sans 3",
"slug": "source-sans-3",
"fontFamily": ""Source Sans 3", sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/SourceSans3VF-Upright.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Source Sans 3"
}
]
}
]
}
}
}Onthoud dat je nog steeds een basis styles.css bestand nodig hebt om de essentiële metadata op te nemen die WordPress vertellen dat je met een childthema werkt.
Samenvatting
Of je nu kiest voor een volledig custom setup of een snelle integratie, variabele lettertypen in WordPress bieden een krachtige manier om de typografie van je site te verbeteren. Ze verbeteren de prestaties, verminderen de complexiteit en geven je responsieve, flexibele ontwerpopties die simpelweg niet mogelijk zijn met traditionele statische lettertypen.
Om hun volledige potentieel te benutten, moet je misschien een custom UI maken die de variabele assen (zoals gewicht, schuinte of optische grootte) laat zien en site-eigenaren meer controle geeft.
Als je een WordPress site bouwt op het hostingplatform van Kinsta, profiteer je ook van hun prestatiegerichte infrastructuur, waardoor het nog gemakkelijker wordt om moderne middelen zoals variabele lettertypen efficiënt aan te bieden.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
