Come utilizzare i caratteri scaricati in WordPress senza un plugin

Google Fonts è una risorsa straordinaria. Prima che fosse così diffuso, creare siti Web che utilizzassero caratteri unici era una vera seccatura. Ora, però, con pochi clic e un frammento di codice, il tuo sito web passa da Helvetic-eh a Helvetic-awesome . Ma cosa succede se il carattere che ami non fa parte della famiglia di Google Fonts? Devi sapere come utilizzare i caratteri scaricati perché hai scoperto un fantastico carattere hipster che parla all'anima della tua barba.

L'utilizzo di un font scaricato sul tuo sito Web non è così semplice come clicky-clicky-paste-paste. Non è un processo difficile, bada bene, e ti guiderò attraverso di esso in modo che tu non abbia mai, mai, mai più un sito web Helvetic-eh .

Ora, voglio sottolineare che puoi farlo tramite un plugin. Ce ne sono una manciata disponibili nel repository. Ma perché dovremmo volerlo fare? Sono il tipo di persona che preferisce evitare di usare un plugin quando poche righe di codice fanno la stessa cosa. I plug-in in eccesso causano tonnellate di rigonfiamento, richieste HTTP non necessarie e rallentano il tuo sito.

Quindi importeremo questi caratteri a mano, come se fosse di nuovo la fine degli anni '90. Awww, sì.

Scegliere e scaricare un carattere

Sono un grande fan delle raccolte di font. Elegant Themes ha una tonnellata che puoi scansionare per vedere cosa ti piace. Quindi colpisci alcuni di questi e vedi cosa ti piace.

• Caratteri di scrittura a mano
• Caratteri retrò
• Caratteri esclusivi
• Caratteri corsivi
• Caratteri hipster
• Caratteri divertenti

Per me, sto andando con il font Aventura dal riepilogo Hipster.

Il primo passo è trovare il collegamento per il download del carattere e salvare il file sul computer. Sarà probabilmente un file .zip contenente vari formati di file. I più comuni che troverai sono .ttf (TrueType Font) o .otf (OpenType Font).

Creare un Webfont (un po' facoltativo, ma non proprio)

FontSquirrel ha un ottimo strumento che puoi usare per assicurarti che nessuno e nessun browser rimangano incompatibili con lo splendore del tuo sito. Poiché la maggior parte dei caratteri scaricati sarà disponibile solo in un unico formato, lo strumento FontSquirrel fa in modo che tu non sia limitato da ciò che l'autore del carattere ha distribuito. Finché disponi dei diritti per utilizzare il carattere, puoi assicurarti che funzioni con il tuo prodotto/sito.

Basta caricare il carattere scaricato di recente e scegliere le opzioni. Personalmente, uso le opzioni Esperto , solo per ottenere tutti i formati di carattere che posso. Gli altri funzionano, ma non ottieni tanti tipi di file, il che è un po' il punto dell'intera faccenda.

FontSquirrel è anche fantastico perché ti fornisce il CSS necessario per importarli sul tuo sito. Com'è quello per facile da usare? Dovrai semplicemente copiarlo e incollarlo (di cui ci occuperemo di seguito).

Caricare il tuo carattere su WordPress

Fatto ciò, dovrai caricare il carattere sul tuo provider di hosting. Lo faccio sempre tramite FTP (uso FileZilla, ma puoi usare qualsiasi client tu voglia).

Se non conosci le informazioni FTP del tuo host, accedi al tuo cPanel e guarda in File -> Account FTP .

Vedrai tutti gli account FTP per l'host lì e dovresti anche vedere un collegamento Configura client FTP accanto a ciascuno di essi.

Quando entri, cPanel ti fornisce informazioni sul server o un file FileZilla (e altri) che puoi importare per ottenere le tue credenziali impostate. Personalmente vado per il manuale, ma tu fai quello che ti piace. Anche se usi il file, avrai bisogno della password per accedere, quindi entrambi i metodi sono sicuri e protetti.

Ora che hai effettuato l'accesso al tuo host tramite FTP, vai alla cartella /wp-content per il tuo sito. Poiché questo è contenuto per il tuo sito WordPress, perché non lo metti lì? Sentiti libero di metterlo ovunque, anche in /wp-content/uploads . tu fai tu.

FTP è semplicissimo per caricare il tuo file. Trova il file del carattere che hai scaricato e trascinalo nel riquadro in basso a destra in FileZilla. Questo avvierà il caricamento. Non ci vorrà più di un secondo per vederlo nella directory.

Se hai utilizzato lo strumento FontSquirrel di cui abbiamo discusso sopra, lo farai anche per tutti i file di font che hai scaricato da loro. Basta trascinarli e rilasciarli dove vuoi salvarli.

Usare il tuo carattere con i CSS

Il tuo font è ora caricato e rannicchiato al sicuro nella sua calda e comoda coperta con contenuto wp. È ora di aggiungere l'importazione CSS necessaria al tuo tema.

Vai alla directory del tuo tema figlio (stai utilizzando un tema figlio, giusto?) Nel tuo client FTP e trova il file style.css , fai clic con il pulsante destro del mouse e seleziona Visualizza/Modifica per visualizzarlo nell'editor di testo predefinito.

Se non hai un tema figlio, usa Orbisius Child Theme Creator per farlo in modo super veloce. Puoi eliminare il plugin in seguito. Amo questa cosa.

@font-face

Il codice che usiamo proviene direttamente da FontSquirrel (puoi scriverne uno tuo o copiare/incollare l'esempio qui sotto), e tutto quello che ho cambiato è stato il percorso di caricamento dell'URL per includere /wp-content . Tutto il resto è ciò che il generatore di webfont ha fornito.

Tutto ciò che questo script @font-face fa è dire ai fogli di stile del tuo sito web, "ehi, amico, metto questo nuovo font qui se vuoi usarlo qualche volta". Sai, un po' come fai quando porti i cupcake a casa e lo dici alle persone con cui vivi.

Senza @font-face , se provi a chiamare font-family: 'aventurabold'; da CSS, il tuo sito non sarà in grado di trovarlo perché non è mai stato detto dove lo tieni.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Salva il file e, poiché lo hai aperto per modificarlo tramite FileZilla, otterrai una finestra di dialogo che ti chiederà se desideri sostituire quello sul server. La tua risposta è, ovviamente, sì.

Ora tutto ciò che devi fare è andare nel tuo custom.css (o se usi Divi, Divi -> Opzioni del tema -> CSS personalizzato nel pannello di navigazione della dashboard di WP.)

Basta aggiungere lo stile CSS come faresti per qualsiasi altro carattere. Ho semplicemente sostituito i Google Fonts "Roboto" e "Exo" che stavo usando con "aventurabold" e le cose andavano bene (grazie all'importazione di @font-face sopra).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

I frutti delle nostre fatiche

Ecco come appariva prima:

Ed ecco cosa è successo dopo aver aggiunto Aventura al CSS:

Evviva! Funziona! Buon lavoro! Vai noi!

Stai bene, Friendo

Come disse una volta il famoso capitano Malcolm Reynolds: "Abbiamo fatto l'impossibile e questo ci rende potenti". Bene, ok, quindi caricare un font e importarlo tramite CSS potrebbe non equivalere a fare l' impossibile , ma hai sicuramente fatto qualcosa che molti utenti di WordPress non oserebbero pensare di fare: aggiungere funzionalità di base senza un plug-in.

E questo, amici miei, vi rende davvero potenti.

Quindi qual è il tuo font preferito da utilizzare sul Web che non sia un Google Font? Dimmelo nei commenti!

Immagine in miniatura dell'articolo di 32 Pixel / shutterstock.com