WordPress ha intrapreso da tempo la strada verso una vera e propria API per i Web Fonts - con il rilascio di Gutenberg 12.8 il 16 marzo 2022, è arrivata. Scopri come utilizzare l'API WordPress Web Fonts e cosa cambierà grazie all'API Web Fonts.

Tra le altre cose, l'API WordPress Web Fonts ti permette di aggiungere dinamicamente dei font personalizzati ai tuoi temi WordPress, dandoti un maggiore controllo sul testo del tuo sito WordPress. 

Cos'è la nuova API di WordPress Web Fonts? 

Nel settembre del 2021, la comunità ha discusso una proposta di Ari Stathopoulos, sviluppatore di WordPress , per la creazione di una Web Fonts API. L'API di WordPress Web Fonts è una svolta importante per te che sei uno sviluppatore o un designer. L'API WordPress Web Fonts ti permette di incorporare i font nei tuoi siti web WordPress senza doverti preoccupare della regola font-face o della politica cross domain.  

L'API di WordPress Web Fonts è stata integrata nella nuova versione 12.8 di Gutenberg e dovrebbe entrare a far parte del core con WordPress 6.0. "Il fatto che ci sia voluto così tanto tempo per arrivare a questo punto è una testimonianza di quanto possano essere complessi i font per il web" - come spiega Héctor Prieto nel post sul blog ufficiale di Gutenberg 12.8 su WordPress.org.

Ora che questo quadro di riferimento è stato creato, è possibile costruirci sopra altri strumenti e ottimizzazioni per garantire che WordPress offra la migliore esperienza (e privacy) possibile agli utenti finali.

Perché è necessario un Core API? 

Gli standard consentono un'implementazione di routine dei font. Si tratta di uno standard che permette a qualsiasi sviluppatore di guardare alcune righe di codice e capire cosa fa il codice.L'implementazione di un'API rende possibile una base stabile per gli sviluppi futuri.  

Il progetto Gutenberg

È stato sviluppato l'editor Gutenberg . Oltre alla possibilità di utilizzare stili globali, gli sviluppatori di Gutenberg dovevano anche essere in grado di specificare i font da utilizzare nella pagina. Grazie al fatto che si tratta di un'API, anche altre applicazioni o parti della stessa applicazione possono recuperare i dati dall'API WordPress Web Fonts.

Uno scenario applicativo: hai commissionato a uno sviluppatore la creazione di un banner cookie personalizzato. Sul tuo sito web WordPress, utilizzi l'API WordPress Web Fonts per specificare quali font utilizzare. Lo sviluppatore può utilizzare gli stessi web font utilizzati nell'altro sito web.

Puoi utilizzare la stessa API per gestire i font sul sito web. Non è necessario gestire le impostazioni in più punti. Vale la pena notare che la prima versione è solo una base su cui il team di WordPress costruirà.

La strada verso un'API per i Web Fonts in WordPress è stata una montagna russa di emozioni per gli sviluppatori. Dopo essere stata eliminata da WordPress 5.9, è stata spostata nel progetto Gutenberg dove ha potuto essere sviluppata insieme alle funzioni correlate che si basavano su di essa.

Ciò significa che puoi utilizzare e impostare i tuoi font dallo stesso posto e le modifiche saranno sincronizzate con tutti i luoghi in cui utilizzi l'API WordPress Web Fonts. Vale la pena sottolineare che la prima versione è solo una base su cui il team di WordPress continuerà a costruire. 

In questo articolo ti mostreremo come utilizzare l'API WordPress Web Fonts, dall'installazione all'aggiunta di font all'API. Iniziamo.  

Cosa fa l'API di WordPress Web Fonts? 

Questa API è il primo passo per consentire il caricamento dei font in modo potente, rispettoso della privacy e a prova di futuro, cosa che è molto difficile da fare senza una struttura di questo tipo.

L'API WordPress Web Fonts consente agli sviluppatori di temi di specificare quali famiglie di font devono essere utilizzate in WordPress e i relativi file. WordPress carica automaticamente i font con il CSS corretto nell'editor e nel front end. Nella prima versione dell'API WordPress Web Fonts, gli script e gli stili vengono accodati. Il motivo è la necessità di una soluzione uniforme.

La funzione Web Font API funge da wrapper per l'API del foglio di stile. Questo perché per accodare un font web è necessario accodare il file del font stesso accodando il foglio di stile (o aggiungendo uno stile in linea). 

Inizialmente puoi utilizzare solo font locali. In futuro, il team di WordPress aggiungerà sicuramente il supporto per altri fornitori di font. 

Invece di rimuoverli, forse potremmo implementarli correttamente e forzare i web font gestiti localmente per migliorare le prestazioni e la privacy? In questo modo daremmo il buon esempio e assisteremmo a un miglioramento significativo delle prestazioni e della privacy nell'ecosistema WordPress, dato che i temi e i plugin che attualmente utilizzano i font di Google, Adobe, ecc. adotteranno l'API. 

Citazione da GitHub

Se sono supportati solo i font locali, possono verificarsi problemi di prestazioni quando i download dei temi diventano più grandi. Tuttavia, per molti temi questo non dovrebbe essere un problema: uno, due o tre pacchetti di font dovrebbero essere sufficienti per la maggior parte dei temi. Tuttavia, se le variazioni di stile globali diventano popolari, potremmo vedere temi che offrono molti font per coprire diversi design predefiniti.  

Come utilizzare l'API di WordPress Web Fonts 

Vediamo ora come utilizzare in pratica la nuova API WordPress Web Fonts. 

Esistono due metodi per registrare i web font con WordPress: tramite il file "theme.json", che è standard da WordPress 5.8, o tramite il metodo @font-face. Le chiavi e i valori del theme.json corrispondono principalmente alla regola CSS @font-face. Se non li conosci, dovresti rinfrescare le tue conoscenze. La regola @font-face è uno stile CSS che ti permette di specificare il font che vuoi utilizzare sul tuo sito web.

Puoi utilizzare un font già installato sul computer dell'utente oppure puoi caricare un font da un server remoto. Il file theme.json contiene l'elenco dei font che vuoi utilizzare nel tuo sito web. Contiene il nome del font, l'URL del file del font e il peso e lo stile del font.  

Vediamo ora come modificare i font utilizzando il file theme.json. Per farlo, devi collegarti al tuo sito web WordPress tramite SFTP. È così che si accede ai file del tuo sito web. Usa un client FTP di tua scelta. (Nota che Raidboxes supporta solo SFTP e non FTP non criptato). Io uso Termius.  

Una volta che ti sei collegato al server e ti trovi nella cartella home, vedrai una cartella chiamata "disk". Clicca su di esso. 

Nella cartella "disco" vedrai due cartelle (in alcuni casi potrebbero essere diverse), ma devi cliccare sulla cartella "WordPress". Sotto la cartella "WordPress" vedrai la solita libreria di file di WordPress. Clicca sulla cartella "wp-content" e sotto questa cartella sulla cartella "themes".

Ora ci troviamo nella cartella in cui sono archiviati tutti i temi WordPress installati. Ho cliccato su twentytwentytwo a scopo dimostrativo. Nell'immagine è riportato il file che devi scaricare sul tuo computer per poterlo modificare.  

Dopo aver aperto il file "theme.json" con il normale editor o con il tuo IDE preferito, aggiungi i web font come parte di una speciale definizione di famiglia di font in settings.typography.fontfamily.  

}, 

„typography“: { 

"customFontSize": true, 

"dropCap": false, 

"fontFamilies": [ 

{ 

}, "fontFamily": "outfit", "sans-serif", 

}, "nome": "outfit", 

{"slug": "primary". 

}, 

{ 

}, "fontFamily": "monospace", 

}, "nome": "monospace", 

", "slug": "monospace". 

} 

  

Dopo aver aperto il file "theme.json" in un qualsiasi editor di testo. 

Puoi trovare il tag "typography" se guardi il codice. Poi vedrai il tag "fontFamilies", sotto il quale dovrai inserire i font che vuoi aggiungere al tuo sito WordPress. Nell'immagine è possibile vedere i marcatori rossi. Come nell'immagine qui sopra.  

A seconda del tema che utilizzi, il codice potrebbe avere un aspetto diverso. In un altro esempio, utilizzo il tema predefinito twentytwentytwo senza alcuna modifica. Come puoi vedere sotto il primo "fontfamily", è presente il codice per System Font Stack (i font di sistema e predefiniti utilizzati su computer e telefoni cellulari). Per saperne di più sui font clicca qui.  

Esempi di utilizzo 

Con l'API WordPress Web Fonts per l'ultima versione di WordPress, gli sviluppatori possono specificare quali font utilizzare nell'editor del tema. Immagina che uno sviluppatore voglia utilizzare una combinazione di font secondo i desideri del cliente.

In questo caso è molto facile per l'editore pubblicare un articolo. L'editor non deve pensare alle combinazioni di caratteri, sono già preimpostate. Questo esempio di applicazione mostra l'idea alla base dell'API Font. 

Conclusioni sull'API di WordPress Web Fonts

L'API di WordPress Web Fonts è una novità per te che sei uno sviluppatore o un designer web. Permettendo agli sviluppatori di temi di definire le famiglie di font e i file associati, WordPress si occupa di caricare i font sia nell'editor che nel front end. Questo rende lo sviluppo e la progettazione molto più semplici ed efficienti. 

In questo articolo ho descritto il funzionamento dell'API di WordPress Web Fonts. Hai provato a usarlo? Mi piacerebbe conoscere la tua opinione.