Come aggiungere un carattere offline al tuo sito WordPress

Se stai cercando di aggiungere un po' di personalità in più al tuo sito WordPress, potresti prendere in considerazione l'idea di caricare un font offline. Sebbene ci siano molti modi per farlo, ti mostreremo uno dei metodi più semplici utilizzando Font Squirrel Webfont Generator. Una volta scaricati i file dei font , puoi caricarli sul tuo sito WordPress e utilizzarli come qualsiasi altro font. Iniziamo!

Questo articolo era sulla mia scrivania da un po' di tempo e volevo condividerlo con voi. I caratteri di Google sono completamente caricati localmente. Finora ho utilizzato i caratteri Google Oswald e Lato di Crunchify.com. Basta aprire l'URL nell'immagine sopra che appare nella nuova scheda e noterai che ha generato 14 nuovi caratteri . Questo tutorial ti aiuterà anche se hai una delle seguenti domande. Dopo aver estratto il file Lato.zip, sarai in grado di vedere tutti e dieci i caratteri di Lato con estensione.ttf. Sulla maggior parte dei siti Web sono necessari solo caratteri regolari, grassetto e corsivo.

Nel passaggio 2, ora devi convertire i tuoi caratteri nei formati woff2, eot,svg, ttf e wof. Un file può essere caricato sul sito https://Font-Converter.net/en che convertirà il font in questi formati. Non c'è altro da dire. Ora puoi caricare i font dal tuo file system locale.

Come aggiungo caratteri personalizzati al tema WordPress?

Esistono diversi modi in cui puoi aggiungere caratteri personalizzati al tuo tema WordPress. Un modo è utilizzare la libreria di Google Fonts. Puoi trovare un elenco completo di tutti i caratteri disponibili sul sito Web di Google Fonts. Una volta trovato un font che ti piace, puoi aggiungere il codice al foglio di stile del tuo tema (style.css). Ad esempio, se si desidera utilizzare il carattere "Open Sans", è necessario aggiungere il seguente codice al foglio di stile: body { font-family: 'Open Sans', sans-serif; } Un altro modo per aggiungere caratteri personalizzati al tema WordPress è utilizzare un plug-in come Easy Google Fonts . Questo plugin semplifica l'aggiunta di caratteri personalizzati al tuo tema senza dover modificare alcun codice.

Il plug-in Easy Google Fonts può essere utilizzato per aggiungere caratteri personalizzati al tuo sito WordPress. Utilizzando questo metodo, sarai in grado di attirare l'attenzione sul tuo sito Web utilizzando un'ampia gamma di caratteri. La tipografia ha dimostrato di avere una serie di vantaggi nella ricerca. Un semplice sito Web rende più facile per i clienti comunicare con te. Utilizzando le proprietà CSS, puoi modificare lo stile e il posizionamento del tuo font preferito oltre a cambiarne lo stile e il posizionamento. Oltre ai tuoi controlli dei caratteri, puoi utilizzare la pagina delle impostazioni del plug-in di WordPress per aggiungerli. Se non desideri utilizzare un plug-in, puoi utilizzare questo al posto dei caratteri Adobe.

Installa il plug-in Custom Adobe Fonts per semplificare l'integrazione di questi caratteri nel tuo sito WordPress. Installa il plug-in, quindi vai alla vasta libreria di caratteri di Adobe per trovare un carattere che funzioni per te (devi registrarti per usarlo). Dopo aver scelto un carattere, fai clic su di esso e quindi cerca nell'angolo in alto a destra della pagina per "Aggiungi al progetto web". Usando Font Pair, puoi vedere che aspetto hanno le tue combinazioni di caratteri e puoi mescolare e abbinare i caratteri in base a ciò che vedi. Esistono diversi siti Web eccellenti che vendono caratteri personalizzati creati dal designer stesso. Una grande libreria di font è inclusa con il font Squirrel ed è anche semplice da implementare. Puoi usare il kit di font web di @Font-Face.

Il tuo sito Web WordPress ora dovrebbe essere pronto per l'uso. Il kit include il file dei font e un foglio di stile che contiene il codice necessario per creare il tuo foglio di stile CSS. Ad esempio, dovremmo usare il seguente CSS per il font OpenSans-ExtraBold- web . La soluzione migliore è salvare tutti i file dei font in una posizione a tua scelta.

Come caricare i caratteri di Google in WordPress

Vai al pannello di amministrazione di WordPress e seleziona Aggiungi nuovo. Scarica e installa Easy Google Fonts dal Google Play Store. Dopo aver installato il plug-in, è necessario fare clic sul pulsante Attiva per iniziare a usarlo.

Sul tuo sito web o sui prodotti digitali, puoi utilizzare Google Fonts per sperimentare oltre 1000 diverse famiglie di caratteri. Se desideri aggiungere manualmente i caratteri Google al tuo sito WordPress, ci sono diverse opzioni. Sono gratuiti e open source, quindi possono essere utilizzati da qualsiasi sviluppatore. Il modo più conveniente per integrare i caratteri di Google è includere uno snippet con l'URL della specifica famiglia di caratteri nel file functions.php. Se trovi difficile il processo manuale, puoi utilizzare un plug-in. Puoi prima installare il plug-in visitando il repository dei plug-in di WordPress. Ora deve essere installato e attivato.

La maggior parte dei temi WordPress include l'integrazione dei caratteri di Google come parte delle impostazioni predefinite. I plugin che compongono la piattaforma OMGF ti permettono di navigare oltre 600 font sul tuo sito web. Nel menu a discesa "Famiglia di caratteri", puoi selezionare tra oltre 100 tipi diversi per varie sezioni del tuo sito. Sono disponibili diverse opzioni per aggiungere controlli dei caratteri personalizzati , come mostrato nell'anteprima della personalizzazione.

Dovrei caricare i caratteri di Google localmente WordPress?

Se il tuo sito WordPress ha errori di Google Font, dovresti caricare i caratteri di Google localmente per risolverli. Ci sono alcune risorse e script esterni che non puoi controllare, il che rende impossibile comprimerli, minimizzarli o ottimizzarli. La tua velocità di WordPress sarà gravemente ostacolata se non prendi queste precauzioni.

Wp-content/themes/your-theme/fonts

La cartella wp-content/themes/your-theme/fonts è dove puoi archiviare tutti i caratteri personalizzati che desideri utilizzare con il tuo tema. I caratteri possono essere aggiunti a questa cartella tramite FTP o utilizzando un plug-in di gestione file. Una volta aggiunti i caratteri a questa cartella, possono essere utilizzati nel CSS del tuo tema facendo riferimento al nome del carattere.

Gli stili globali possono essere utilizzati per modificare il carattere del tuo sito Web se utilizza uno dei seguenti temi. In questo caso, i caratteri di base e di intestazione sono nella stessa coppia di caratteri. Per salvare i nuovi abbinamenti di caratteri, fai clic sul pulsante Pubblica nel menu Stili globali oppure fai clic su Ripristina per annullare le modifiche. Dopo aver scelto i caratteri personalizzati appropriati, puoi cambiarli tutte le volte che vuoi. Se desideri modificare la dimensione dell'intestazione o dei caratteri di base, puoi farlo selezionando l'opzione dimensione in basso ea destra di ciascun carattere, quindi selezionando una dimensione dal menu a discesa. Con CSS personalizzato, puoi modificare la dimensione del carattere predefinita globale. Assicurati di disattivare o eliminare un plug-in se decidi di smettere di usarlo dopo averlo testato. Non è possibile collegare un account Typekit.com a un blog o sito Web WordPress.com. Se vuoi testare la compatibilità di un font specifico con una determinata lingua, usa il Customizer.

Aggiungi caratteri a WordPress senza plug-in

Esistono alcuni modi per aggiungere caratteri a WordPress senza un plug-in. Un modo è utilizzare la libreria di Google Fonts. Basta andare sul sito Web di Google Fonts, selezionare il carattere che si desidera utilizzare e quindi copiare il codice fornito. Quindi, apri la dashboard di WordPress e vai su Aspetto> Personalizza. Quindi, fai clic sulla scheda "CSS aggiuntivo" e incolla il codice che hai copiato da Google Fonts. Salva le modifiche e il nuovo carattere verrà applicato al tuo sito web.

I temi non devono includere i caratteri Web nelle impostazioni predefinite. Durante la navigazione in una pagina web, potrai scaricarla utilizzando il tuo browser. Per copiare e incollare il codice dei caratteri nel file del tema, scegli semplicemente il carattere che desideri. Puoi utilizzare più caratteri contemporaneamente e vedrai per quanto tempo vengono caricati i caratteri. Aggiungi più CSS al tuo blog WordPress andando alla dashboard del blog di WordPress. Copia l'intero codice dalla casella grigia 1 nel carattere web del corpo del testo. La nuova famiglia di font web si trova nella seconda casella grigia della libreria dei font di Google . Inoltre, il codice seguente può essere utilizzato per regolare la dimensione del carattere e il peso del carattere.