Wordpress Font API: Come usare l'API dei caratteri di Wordpress

Come usare l'API di WordPress Web Fonts - semplicemente spiegato

WordPress è stato sulla strada di una vera API di Web Fonts per molto tempo - con il rilascio di Gutenberg 12.8 il 16 marzo 2022, è qui. Impara come usare l'API di WordPress Web Fonts e cosa cambierà finalmente grazie all'API Web Fonts.

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

Ma cos'è un'API?

Un'interfaccia è chiamata interfaccia di programmazione delle applicazioni (API). Questo significa che si lascia che i programmi comunichino tra loro in modo che possano scambiarsi dati in modo limitato e controllato.

Cos'è la nuova API di WordPress Web Fonts? 

Nel settembre 2021, una proposta dello sviluppatore di WordPress Ari Stathopoulos per una API di Web Fonts è stata discussa nella comunità. L'API di WordPress Web Fonts è un importante passo avanti per te come sviluppatore web:in o designer:in. L'API di WordPress Web Fonts ti permette di incorporare i font nei tuoi siti web WordPress senza doverti preoccupare della regola del font-face o della politica del dominio incrociato.  

L'API di WordPress Web Fonts è stata integrata nella nuova versione 12.8 di Gutenberg e dovrebbe entrare nel 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 web font" - come spiega Héctor Prieto nel post del blog ufficiale per Gutenberg 12.8 su WordPress.org.

Ora che questo quadro è in atto, ulteriori strumenti e ottimizzazioni possono essere costruiti su di esso per garantire che WordPress fornisca la migliore esperienza possibile (e la privacy) per gli utenti finali.

"*" indica i campi obbligatori

Consenso*
Questo campo è per la convalida e non deve essere modificato.

Perché è necessaria una Core API? 

Gli standard permettono un'implementazione di routine dei font. È uno standard in modo che qualsiasi sviluppatore possa guardare poche righe di codice e capire cosa fa il codice.Implementando un'API, si rende possibile una base stabile per gli sviluppi futuri.  

Il progetto Gutenberg

È stato sviluppato l'editor Gutenberg . Insieme alla capacità di usare stili globali, gli sviluppatori di Gutenberg avevano anche bisogno di poter specificare quali font dovessero essere usati nella pagina. Grazie al fatto che è un'API, altre applicazioni o parti della stessa applicazione possono anche recuperare i dati dall'API di WordPress Web Fonts.

Uno scenario applicativo: hai incaricato uno sviluppatore di creare un banner personalizzato per i cookie. Sul tuo sito WordPress, usi l'API di WordPress Web Fonts per specificare quali font utilizzare. Lo sviluppatore può usare gli stessi web font che sono usati sull'altro sito web.

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

La strada verso una Web Fonts API in WordPress è stata una montagna russa di emozioni per gli sviluppatori. Dopo essere stato eliminato da WordPress 5.9, è stato spostato nel progetto Gutenberg dove poteva essere sviluppato insieme alle caratteristiche correlate che si basavano su di esso.

Questo significa che puoi usare e impostare i tuoi font dallo stesso posto e le modifiche saranno sincronizzate con tutti i posti dove usi l'API di WordPress Web Fonts. Vale la pena notare che la prima versione è solo una base su cui il team di WordPress continuerà a costruire. 

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

Cosa fa l'API di WordPress Web Fonts? 

Questa API è il primo passo per consentire il caricamento di font in un modo potente, rispettoso della privacy e a prova di futuro - qualcosa che è molto difficile da fare senza un tale framework.

L'API di WordPress Web Fonts permette agli sviluppatori di temi di specificare quali famiglie di font devono essere utilizzate in WordPress insieme ai loro file associati. WordPress carica automaticamente i font con il CSS corretto nell'editor e nel frontend. Nella prima versione dell'API di WordPress Web Fonts, gli script e gli stili sono in coda. La ragione di ciò è la necessità di una soluzione uniforme.

La funzione Web Font API agisce come un wrapper per l'API del foglio di stile. Questo perché per mettere in coda un web font, il file del font stesso deve essere messo in coda accodando il foglio di stile (o aggiungendo uno stile in linea). 

Inizialmente, si possono usare 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 ospitati localmente per migliorare le prestazioni e la privacy? In questo modo daremmo il buon esempio e vedremmo un miglioramento significativo delle prestazioni e della privacy nell'ecosistema WordPress, poiché i temi e i plugin che attualmente utilizzano i font di Google, i font di Adobe, ecc. adotteranno l'API. 

Citazione da GitHub

Può portare a problemi di prestazioni quando i download dei temi diventano più grandi se sono supportati solo i font locali. 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 globale diventano popolari, potremmo vedere temi che offrono molti font per coprire diversi design predefiniti.  

Come usare l'API di WordPress Web Fonts 

Diamo ora un'occhiata a come la nuova API di WordPress Web Fonts può essere utilizzata in pratica. 

Ci sono due metodi per registrare i web font con WordPress: tramite il tuo 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 conoscete, dovreste rinfrescare la vostra conoscenza. La regola @font-face è uno stile CSS che ti permette di specificare il carattere che vuoi usare sul tuo sito web.

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

Ora vedremo come puoi cambiare i font usando il file theme.json. Per fare questo, è necessario connettersi al tuo sito WordPress tramite SFTP. Questo è il modo in cui si accede ai file sul tuo sito web. Usate un client FTP di vostra scelta. (Si noti che Raidboxes supporta solo SFTP e non FTP in chiaro). Io uso Termius.  

Una volta che vi sei collegati al vostro server e sei nella cartella home, vedrete una cartella chiamata "disk". Cliccate su di esso. 

Wordpress Web Fonts Api

Nella cartella "disk" vedrai due cartelle (questo può sembrare diverso in alcuni casi), ma dovresti 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 siamo nella cartella dove sono memorizzati tutti i temi installati di WordPress. Clicco su twentytwentytwo a scopo dimostrativo. Nell'immagine puoi vedere il file che devi scaricare sul tuo computer per modificare il file.  

Wordpress Web Fonts Api

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

}, 

“typography”: { 

"customFontSize": vero, 

"dropCap": falso, 

"fontFamilies": [ 

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

}, "name": "outfit", 

{ "slug": "primario". 

}, 

}, "fontFamily": "monospace", 

}, "nome": "monospace", 

"}, "slug": "monospace 

  

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

Wordpress Web Fonts Api

Puoi trovare il tag "typography" se guardi nel codice. Poi vedrai il tag "fontFamilies", sotto il quale inserisci i font che vuoi aggiungere al tuo sito WordPress. Nell'immagine si possono vedere i marcatori rossi. Come nella foto qui sopra.  

Wordpress Web Fonts Api

A seconda del tema che usi, il codice può apparire diverso. In un altro esempio, uso il tema predefinito di twentytwentytwo senza alcuna modifica. Come potete vedere sotto il primo "fontfamily", vedete il codice per System Font Stack (Il sistema e i font di default sono usati su computer e telefoni cellulari). Leggi di più sui font qui.  

Esempi di utilizzo 

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

Allora è 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 qual è l'idea dietro l'API Font. 

Conclusione sull'API di WordPress Web Fonts

L'API di WordPress Web Fonts è un cambio di gioco per te come sviluppatore web o designer. 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 frontend. Questo rende lo sviluppo e la progettazione molto più facile ed efficiente. 

In questo articolo ho descritto come funziona l'API di WordPress Web Fonts. hai provato a usarlo? Mi piacerebbe sentire la vostra opinione.   

Le vostre domande sull'API di WordPress Web Fonts

Che domande hai per Noel? Sentitevi liberi di usare la funzione di commento. Vuoi essere informato sui nuovi articoli sul tema del marketing online? Allora seguiteci su Twitter, Facebook, LinkedIn o tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato.