Includere caratteri personalizzati nei plugin di WordPress

Più lavori nello sviluppo web, più è probabile che vedrai persone che ti chiedono di incorporare caratteri personalizzati nel loro progetto.

A volte questo è facile. Ad esempio, se lavori con qualcosa come un Google Web Font, puoi facilmente copiare il codice necessario per incollarlo nel tuo foglio di stile.

Spesso, il codice assomiglia a questo :

E poi puoi usarlo nel tuo foglio di stile in questo modo :

font-family: 'Roboto', sans-serif;

Ma cosa succede se qualcuno ti fornisce un set di caratteri che desidera utilizzare nel proprio progetto che sono in un formato di file e che non sono ospitati su un tipo di rete di distribuzione dei contenuti?

Caratteri personalizzati nei plugin di WordPress

Innanzitutto, vale la pena notare che per utilizzare determinati font nei tuoi progetti devono rientrare in una licenza specifica. Questo non è il post che discuterà i vari tipi di licenza, ma assicurati di avere l’autorizzazione per il carattere.

In secondo luogo, nota che esistono diversi formati per i caratteri. Nell’esempio seguente, vedrai che sto usando il formato OpenType. La versione TL;DR di questo è la seguente:

Il formato OpenType è un superset dei formati di font TrueType e Adobe® PostScript® Type 1 esistenti. Consente una migliore portabilità dei documenti multipiattaforma, un ricco supporto linguistico, potenti capacità tipografiche e requisiti di gestione dei caratteri semplificati.

Se sei interessato, puoi leggere di più qui.

Terzo, quando si tratta di lavorare con questi font, fogli di stile e di incorporarli nel contesto di un plugin per WordPress, trovo che, come con qualsiasi altra cosa, mantenere le cose organizzate sia importante.

Organizzare i caratteri all’interno di un plug-in

All’interno della directory degli asset, normalmente ho una directory css e una js. A volte questo include anche le immagini e, in questo esempio, include anche i caratteri.

Una volta che i caratteri sono stati inseriti nella directory corretta, è davvero facile includerli nel foglio di stile. Innanzitutto, li definisci in questo modo :

@font-face {
    font-family: GothamLight;
    src: url("../fonts/Gotham-Light.otf") format("opentype");
}

@font-face {
    font-family: ThirstyScriptMedium;
    src: url("../fonts/ThirstyScriptMedium.otf") format("opentype");
}

E poi puoi usarli (insieme a un adeguato fallback) in questo modo :

#search_keywords {
    background: #ffffff;
    color: #151335;
    font-family: 'GothamLight', sans-serif;
}

Per essere completo, vale la pena notare che colleghi semplicemente i fogli di stile come faresti con qualsiasi altro in un plug-in:

È tutto.

Un semplice post

Certo, tutto questo è facile da tracciare, ma i punti principali degni di nota sono:

• non usare caratteri illegali,
• organizzare le tue risorse,
• definirli, quindi utilizzarli insieme a un appropriato fallback.

E questo è tutto.