Con l’introduzione dei web font nel 2009, i web designer hanno a disposizione una ricca serie di palette tipografiche. Questi font sono stati largamente utilizzati grazie alla regola CSS @fontface, che ha dato ai designer la possibilità di svincolarsi dai font web-safe (di sistema).
Una varietà di formati di file di font erano (e sono) disponibili presso grandi fonderie di font, in particolare Google Fonts.
All’epoca, utilizzare i font per il web significava lavorare con file separati per ogni peso e stile di carattere. Ad esempio, nomi di file come i seguenti rendevano chiaro il modo in cui il font sarebbe stato visualizzato:
Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttfOgni variante doveva essere caricata come file a sé stante. Questo aumentava il peso della pagina, richiedeva un maggior numero di richieste HTTP e aggiungeva complessità nella scelta e nell’applicazione dei font in un design.
L’ascesa dei font variabili
Nel 2016 è arrivata un’importante svolta nella tipografia digitale: i font variabili. Sviluppati in collaborazione da Google, Apple, Adobe e Microsoft, sono entrati rapidamente nel mainstream.
La caratteristica distintiva di un font variabile è che può contenere uno qualsiasi dei seguenti elementi, ognuno dei quali è noto come asse:
| Asse | Proprietà CSS |
| peso | font-weight |
| stile | font-style: italic |
| inclinazione | font-style: oblique |
| allungamento | font-stretch |
| Asse delle dimensioni ottiche (opsz) | font-variations-setting |
Il formato di file più utilizzato è .woff2 (Web Open Font Format), un formato altamente compresso che è diventato una raccomandazione del W3C nel 2018. Anche se formati come .ttf e .otf possono essere utilizzati come font variabili, il formato più efficiente è .woff2. Tutti i browser moderni supportano i font variabili.
Per chiarezza, facciamo una distinzione tra “web font” e “font variabili”. In pratica, però, spesso i font variabili vengono accomunati ai font web.
Perché usare i font variabili?
Ci sono tre motivi principali per utilizzare i font variabili nei progetti web:
- Migliori prestazioni: Invece di richiamare più file di font separati (Regular, Bold, Italic, ecc.), un unico file di font variabile può coprirli tutti. Questo significa meno richieste HTTP e tempi di caricamento ridotti.
- Flessibilità nella progettazione: I font variabili permettono di avere un controllo granulare. Ad esempio, invece di essere vincolati a
font-weight: 500o600, possiamo impostare un valore personalizzato come532. - Tipografia reattiva: Poiché i font variabili possono adattarsi in modo fluido, è possibile creare una tipografia che risponda a tutti i dispositivi. Un buon esempio: l’uso di
font-weight: clamp()per scalare il peso tra i diversi viewport, senza i bruschi “salti” che si avrebbero con i file di font statici.
Come WordPress utilizza i font variabili
Con il rilascio di WordPress 6.1 nel novembre 2022, è stato aggiunto al sistema del theme.json il supporto dei font variabili. La prima dimostrazione è stata data dal tema Twenty Twenty-Three.
Personalizzazione di un tema con font variabili
Quando si lavora con un child theme di TT5, si inizia con l’acquisizione degli stili del tema genitore e del child theme.
Per assicurarci che i font personalizzati appaiano in modo coerente sia nell’editor che sul front-end, inseriamo anche un file fonts.css che include le dichiarazioni @font-face necessarie.
<?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')
);
});Come sempre, le modalità di invio degli script dipendono dal tema stesso. Non esiste un metodo standard.
Per assicurarci di aver configurato correttamente il nostro child theme, eseguiamo questo test nel file styles.css:
body { background: #0000ff; }Aggiunta di font con il theme.json
TT5 include già due font variabili predefiniti: Manrope e Fira Code. Per questo esempio, aggiungiamo Vollkorn e rendiamolo il font di intestazione predefinito con peso 600.
Ecco la parte rilevante di 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"
}
}
}
}
}Il risultato è la comparsa del font Vollkorn in tutto il sito.
Ci sono diverse cose da notare:
- Potremmo voler copiare i file Manrope e Fira Code su child theme nel caso in cui TT5 venga aggiornato con nuovi percorsi dei file.
- Potrebbe sembrare che il codice per questi font sia superfluo, dato che sono già registrati dal tema principale. Tuttavia, è importante dichiararli nel child theme. In questo modo si assicura che vengano visualizzati correttamente nell’interfaccia utente della libreria di font e che rimangano disponibili anche se il tema principale si aggiorna con nuovi percorsi o modifiche.
- Stiamo facendo riferimento a due diversi file Vollkorn.
Assicurarsi che i font vengano caricati correttamente
A volte i font non vengono visualizzati correttamente sul front-end finché non li si dichiara nel CSS. Ecco un tipico esempio di 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;
}Nel file fonts.css, dichiariamo i file dei font utilizzando @font-face. In questo modo il browser sa quali font caricare e applicare. Se desideriamo precaricare veramente i font critici (ad esempio, il font dell’intestazione principale), possiamo anche aggiungere un <link rel="preload"> al tag <head> del sito tramite gli hook di WordPress. Nella maggior parte dei casi, la regola @font-face con font-display: swap offre un buon equilibrio tra prestazioni ed esperienza utente.
/* 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;
}Il risultato è una pagina in cui di default le intestazioni sono in Vollkorn con un peso del carattere pari a 600.
Se si preferisce, si possono includere le regole di @font-face in styles.css. In questo modo non sarà più necessario inserire il file fonts.css.
Facilitare la scelta dei pesi dei font da parte degli utenti
Uno dei maggiori vantaggi dei font variabili è che i pesi non sono limitati a valori fissi come 400 o 600. È possibile utilizzare qualsiasi valore compreso tra 100 e 900. Il problema è che WordPress non fornisce un’interfaccia utente per scegliere questi pesi personalizzati.
Per risolvere questo problema, abbiamo creato un plugin minimale chiamato Font Weight Options. Questo plugin aggiunge una pagina di impostazioni in Aspetto > Peso dei caratteri dove è possibile definire i pesi personalizzati per il testo, le intestazioni e i blocchi di codice.
Ecco una panoramica della logica di base:
<?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();Abbiamo pubblicato il codice sorgente completo su GitHub Gist, compreso il modulo delle impostazioni e la validazione.
La versione completa aggiunge:
- Valori predefiniti all’attivazione del plugin
- Un semplice modulo di impostazioni per l’amministratore con campi numerici (100-900)
- Convalida per mantenere i valori nell’intervallo
- Output dei pesi sia nell’editor di blocchi che nel frontend
Il risultato è questa nuova pagina nel nostro WP Admin che consente agli utenti di impostare i valori di peso dei caratteri per i nostri tre font. Abbiamo scelto tre valori “non standard”.
Il risultato è una pagina con questi pesi dei caratteri corrispondenti che vengono visualizzati come previsto nell’editor di pagina e nel front-end.
Un modo più semplice e gentile per aggiungere un singolo font variabile
Se questo metodo può sembrare eccessivo, abbiamo un’alternativa che non è completa, ma è una soluzione rapida per inserire qualsiasi tipo di font in un tema.
Gli utenti possono aggiungere facilmente Google Fonts tramite la Libreria dei Font. Se si preferisce questa via, si può dare un’occhiata al nostro articolo sui 15 migliori font di Google (più i consigli per usarli).
Ma se si preferisce qualcosa di diverso da un font di Google? Ci sono molti modi per ottenere font open source con licenza corretta per i propri progetti. Noi ci siamo rivolti a GitHub per ottenere SourceSans3VF-Upright, un font di Adobe.
Il nostro obiettivo è quello di utilizzarlo come font opzionale da visualizzare nell’editor e nel frontend.
Il file del font è stato inserito nella cartella /assets/fonts del nostro child theme. Da qui abbiamo creato functions.php.
<?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' );
} );Come nell’esempio precedente, il nostro file theme.json deve fare riferimento ai codici Manrope e Fira del tema genitore. Se li omettiamo, li eliminiamo dal tema.
{
"$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"
}
]
}
]
}
}
}Si ricordi che c’è bisogno di un file styles.css di base per includere i metadati essenziali che indicano a WordPress la presenza di un child theme.
Riepilogo
Sia che si scelga una configurazione completamente personalizzata o una integrazione rapida, i font variabili in WordPress offrono un’ottima soluzione per elevare la tipografia di un sito. Migliorano le prestazioni, riducono la complessità e offrono opzioni di design reattive e flessibili che non sono possibili con i font statici tradizionali.
Per sfruttare appieno il loro potenziale, potrebbe essere necessario creare un’interfaccia utente personalizzata che esponga gli assi variabili (come il peso, l’inclinazione o le dimensioni ottiche) e dia ai proprietari del sito un maggiore controllo.
Se stai costruendo un sito WordPress sulla piattaforma di hosting di Kinsta, avrai a disposizione una infrastruttura orientata alle prestazioni, che rende ancora più facile servire in modo efficiente risorse moderne come i font variabili.
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.
