Aggiunta di caratteri personalizzati a WordPress


Come aggiungere caratteri personalizzati a WordPress


La scelta del carattere giusto per il tuo sito WordPress è una parte centrale del web design e del marchio del sito web.

Come colori, immagini e altri elementi, tipografia gioca un ruolo importante nel modo in cui il tuo sito viene percepito dai visitatori.

Per fortuna, i caratteri WordPress sono una delle tante cose che puoi personalizzare liberamente. Puoi usare praticamente qualsiasi font personalizzato gratuito sul tuo sito WordPress che desideri.

Tratteremo tutto ciò che devi sapere sui caratteri WordPress:

  • A) Come aggiungere caratteri personalizzati a WordPress (manualmente)
  • B) Come aggiungere caratteri personalizzati a WordPress (tramite plugin)
  • Perché usare font personalizzati su WordPress
  • Dove trovare caratteri personalizzati
  • Conclusione

A) Come aggiungere caratteri personalizzati a WordPress manualmente

Quando si tratta di aggiungere manualmente caratteri personalizzati a WordPress, sono disponibili tre opzioni principali: HTML, JavaScript e CSS. Ci sono pro e contro per ogni metodo e quale è quello giusto per te dipende dalla tua configurazione. Non preoccuparti, esamineremo ciascuno di essi in dettaglio.

1. Utilizzo di CSS e @importare

Cominciamo con il metodo meno raccomandato. Se prevedi di installare caratteri tipografici personalizzati da Google Fonts, potresti aver notato che ha una scheda etichettata @importare. Il servizio ti dà un pezzo di codice CSS.

scheda di importazione in caratteri Google

Puoi prenderlo così com’è e inserirlo nella tua intestazione (più su quello sotto) o copiarlo senza il >parentesi all'inizio del tema (o meglio ancora, tema figlio) style.css file.

/ *
Nome del tema: Ventisette bambini
URI del tema: https://wordpress.org/themes/twentyseventeen/
Modello: ventisette anni
Autore: il team di WordPress
URI dell'autore: https://wordpress.org/
Versione: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS aggiuntivo va qui * /

In questo modo caricherai il carattere nel tuo sito dal foglio di stile. Sembra una soluzione semplice, giusto? Perché è quindi il meno raccomandato?

Il motivo è problemi di prestazioni. utilizzando @importare non è più il modo consigliato di procedere perché impedisce ai browser di scaricare contemporaneamente più fogli di stile. La conseguenza: tempi di caricamento della pagina più lenti. Stanne lontano, se puoi.

2. Utilizzo di un file modello WordPress

Un secondo metodo per ottenere i caratteri sul tuo sito è quello di prendere il codice fornito dalle librerie di caratteri e copiarli nel tuo header.php file modello. La maggior parte dei temi WordPress standard ce l'ha.

Assicurati di posizionarlo da qualche parte tra il e parentesi. In questo modo, il tuo carattere verrà caricato ogni volta che viene caricata una pagina.

inserisci il codice dei caratteri di google nell'intestazione di wordpress

Se stai utilizzando un tema figlio, assicurati di copiare il tema principale header.php file nella directory del tema figlio e apportare le modifiche.

Alcuni temi includono impostazioni che consentono di aggiungere codice personalizzato all'intestazione e al piè di pagina tramite il back-end. Questa è anche un'opzione praticabile.

3. Utilizzo @ Font-face

Finora abbiamo parlato solo di come utilizzare caratteri personalizzati in WordPress che sono ospitati altrove, vale a dire i server di Google e Adobe. Tuttavia, è anche possibile ospitare caratteri sul proprio sito e offrirli ai browser dei visitatori da lì.

Per fare ciò, devi prima scaricare il carattere in questione. Ricorda il pulsante di download su Google Fonts? Quello tornerà utile ora. Altri provider ti consentono anche di scaricare caratteri.

Quando lo fai, assicurati di averlo in un formato di carattere web. Ciò significa TTF, OTF o WOFF. Troverai maggiori informazioni a riguardo Qui. Se non disponi del giusto formato di caratteri web, puoi anche utilizzare questo servizio per convertire il tuo carattere in uno supportato.

Una volta che hai i file dei font pronti, devi caricarli sul tuo sito WordPress tramite FTP. Un buon posto per conservarli è in una sottodirectory del tema del tuo bambino chiamato font (creativo, lo sappiamo).

Successivamente, è necessario caricare il carattere nel foglio di stile tramite @ Font-face. Ecco come appare:

@ font-face {
famiglia di caratteri: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
peso carattere: normale;
}

Ricorda di sostituire il nome del carattere e l'indirizzo per la sua posizione sul tuo sito. Successivamente, sarà possibile utilizzare il nuovo carattere personalizzato.

Tuttavia, questa non è la soluzione migliore, soprattutto dal punto di vista delle prestazioni. I server di Google sono probabilmente più veloci dei tuoi e quindi caricare font personalizzati da lì è probabilmente la soluzione migliore.

4. Font accattivanti - Il "modo WordPress"

Se vuoi davvero aggiungere caratteri personalizzati a WordPress nel modo corretto, utilizzerai il tuo functions.php file (all'interno della directory del tema attualmente attivo) e la funzione  wp_enqueue_script o wp_enqueue_style.

Con il loro aiuto, possiamo prendere gli snippet di codice forniti dai siti dei font. Tuttavia, invece di copiarli in un file, li aggiungeremo all'intestazione tramite una funzione.

Qual è la differenza tra wp_enqueue_script e wp_enqueue_style? Come suggeriscono i loro nomi, uno è per l'aggiunta di script, uno per i fogli di stile. Quale è giusto usare dipende da come i tuoi caratteri personalizzati sono forniti dalla loro fonte.

Ad esempio, Google Fonts ti offre i caratteri come fogli di stile. In tal caso, li aggiungeresti al tuo sito WordPress in questo modo:

funzione add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Contrariamente a ciò, i caratteri di Adobe Edge Web Fonts vengono forniti come JavaScript. Pertanto, per accodarli sul tuo sito, il codice sarebbe simile al seguente:

funzione add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Non è stato così difficile, vero? Inoltre, ottieni punti extra per farlo nel modo WordPress.

5. Chiama i caratteri personalizzati nel foglio di stile

Ora che i caratteri sono stati aggiunti al tuo sito, puoi usarli ufficialmente. Per fare ciò, non resta che aggiungere una dichiarazione per il nuovo carattere nel foglio di stile. Ad esempio, per cambiare il carattere per i tag di intestazione, dovresti usare qualcosa del genere:

h1,
h2,
h3,
h4,
h5,
h6 {
famiglia di caratteri: 'Roboto';
}

Nota: Presta attenzione al modo in cui il servizio che stai utilizzando specifica la dichiarazione CSS per i tuoi caratteri. Sul nostro sito di test, a quanto pare non siamo riusciti a far funzionare Adobe Edge Web Fonts perché chiamano Open Sans in CSS con aperti sans al contrario di 'Open Sans' in Google Fonts.

Questo è tutto. Ora sai come aggiungere manualmente caratteri personalizzati a WordPress. Congratulazioni, questa è una conoscenza di livello successivo! Ovviamente, le stesse azioni sono possibili tramite plugin. Questo è ciò di cui parleremo dopo.

B) Come aggiungere caratteri personalizzati a WordPress tramite Plugin

La sfera di WordPress non sarebbe quella che sarebbe se non ci fossero diverse soluzioni di plugin per l'aggiunta di caratteri personalizzati alla piattaforma. Vedremo come utilizzare Caratteri Google facili, che è uno dei plugin più popolari in quest'area.

1. Installa il plugin

Il primo passo è l'installazione del plugin. Per farlo, vai oltre Plugin> Installa Nuovo. Quindi, cerca il nome del plug-in. Nei risultati della ricerca, fare clic su Installa ora e attiva il plugin una volta che è sul tuo sito.

2. Aggiungi / Cambia font sul tuo sito

Quando il plugin è attivo, trovi una nuova voce di menu chiamata Tipografia sotto Aspetto> Personalizza.

menu tipografia nel personalizzatore di wordpress

Quando fai clic su di esso e scegli Tipografia predefinita, trovi un elenco di controlli per cambiare il carattere dei tuoi paragrafi e titoli.

facili impostazioni dei caratteri di google nel personalizzatore di wordpress

Usarli è davvero semplice. Basta fare clic sul menu a discesa in cui è indicato Modifica carattere per la parte del tuo sito per cui vuoi cambiarlo. Questo ti dà accesso a questo menu:

i caratteri google facili cambiano carattere

Qui, la parte più importante è quella sotto Famiglia di font. Qui, puoi scegliere un nuovo tipo di carattere dall'intera libreria di caratteri Google (usa Script / sottoinsieme limitare le scelte dei caratteri a quelli con caratteri speciali).

I caratteri sono ordinati per caratteri standard, serif, sans-serif, display, calligrafici e monospace. Tuttavia, puoi anche semplicemente cercarli per nome.

Quando fai clic su un carattere, puoi visualizzare in anteprima le modifiche in tempo reale sulla destra.

ha cambiato il carattere personalizzato in caratteri google facili

3. Configurare il carattere

Dopo aver scelto un carattere, ci sono molte opzioni per personalizzare ulteriormente la tipografia.

Prima di tutto, puoi cambiare il carattere peso / stile sotto il menu con lo stesso nome. Questo controlla lo spessore delle lettere.

Inoltre, sotto Decorazione del testo, è possibile aggiungere sottolineatura, barrato e sottolineato. Trasformazione del testo ti permette anche di impostarlo su tutte le maiuscole, tutte minuscole o maiuscole ogni prima lettera. Sotto il Aspetto in alto, puoi anche controllare il colore del carattere, il colore di sfondo, la dimensione del carattere, l'altezza della linea e la spaziatura delle lettere.

impostazioni dell'aspetto in semplici caratteri Google

Finalmente, Posizionamento consente di modificare altre impostazioni come margine, riempimento, bordo, raggio del bordo e display.

impostazioni di posizionamento in semplici caratteri Google

In breve, dovresti essere in grado di personalizzare i caratteri sul tuo sito completamente a tuo piacimento. Facile, no? Non dimenticare di colpire Salva e pubblica in alto quando sei soddisfatto delle tue modifiche.

Non funziona, cosa devo fare?

A volte non riesci a cambiare alcuni dei caratteri sul tuo sito. Questo di solito accade quando il tema che stai utilizzando include classi CSS non standard e selettori per modellarli.

Ad esempio, nel tema Twenty Sixteen, i titoli dei post di blog non sono solo definiti come H1 ma hanno anche una classe CSS chiamata .entry-titolo. Per tale motivo, il plug-in non è in grado di modificarli.

Per porre rimedio a questo problema, è necessario creare un cosiddetto controllo font sotto Impostazioni> Google Fonts.

aggiungi il controllo dei caratteri in semplici caratteri Google

È possibile associare i selettori CSS a un nuovo controllo e forzare l'override quando necessario. Dopo averlo fatto, il nuovo controllo dei caratteri è disponibile come opzione aggiuntiva nel Personalizzatore di WordPress sotto Tipografia a tema. Vai tranquillo.

Altri font personalizzati Plugin WordPress

Ci sono anche altri plugin di WordPress disponibili per l'aggiunta di caratteri personalizzati:

  • Usa qualsiasi carattere - Ti aiuta a utilizzare i caratteri caricati senza CSS. Ospita i caratteri sul tuo server e offre anche strumenti di conversione per i formati dei caratteri.
  • Font di Typekit per WordPress - Usa i caratteri di Adobe Typekit servizio (per il quale è necessario registrarsi). Ti permette di inserire codici di incorporamento e CSS personalizzati direttamente nel plugin.
  • TK Google Fonts - Una soluzione alternativa per incorporare i caratteri di Google che sposta praticamente l'esperienza di Google Fonts nel back-end di WordPress. Prova i caratteri con un'anteprima e un testo personalizzato, quindi modificalo all'interno del Personalizzatore di WordPress.

Perché usare caratteri personalizzati sul tuo sito Web WordPress?

La tipografia è una scienza in sé e non saremo in grado di offrirti un corso completo sull'uso dei caratteri nel web design qui. Dopotutto, non si tratta solo del carattere, ma anche delle sue dimensioni, inclinazione, spessore e molte altre cose. Tuttavia, noi può capire perché usare caratteri personalizzati sul tuo sito WordPress è una buona idea.

1. La tipografia fa parte della prima impressione

Prima di tutto, il carattere che usi influenza molto la percezione del tuo sito. Il tuo sito è divertente e giocoso? Sei un professionista? I visitatori lo decidono in un colpo d'occhio e la tua tipografia gioca un ruolo importante nella loro percezione.

2. I caratteri hanno molta più influenza di quanto si pensi

Può influire sulla tua capacità di apprendere, memorizzare testi e persino influenzare il tuo umore.

Ad esempio, in uno ricerca, è stato notato che se si desidera aumentare il tempo impiegato per leggere del testo, è necessario utilizzare un carattere serif. Tuttavia, se vuoi leggere di più in breve tempo, dovresti passare a un carattere sans-serif.

Un altro studio ha mostrato alle persone le stesse istruzioni per l'esercizio in diversi caratteri. Hanno quindi chiesto ai partecipanti di stimare il tempo necessario per completare tali istruzioni. Affascinante, quelli con il carattere più complesso hanno indovinato che avrebbero impiegato più tempo del gruppo con il carattere più semplice. Di conseguenza, avevano meno probabilità di seguire la routine di allenamento.

Dove trovare caratteri personalizzati

1. Usa Google Fonts per trovare la tipografia personalizzata

Il primo servizio che vedremo è Google Fonts. Come suggerisce il nome, è un servizio di Google che offre oltre 800 caratteri diversi. Gratuito da usare. Per tutti.

Ecco come usarlo:

2. Trova il carattere giusto

Quando vai per la prima volta alla pagina di Google Fonts (basta digitarlo in Ricerca Google), ecco cosa vedrai:

come aggiungere caratteri personalizzati nella home page di font di wordpress google

L'interfaccia utente è stata creata per aiutarti a trovare il carattere giusto per il tuo scopo. Se hai già in mente un carattere, puoi semplicemente digitare il suo nome nel campo di ricerca sul lato destro.

In caso contrario, puoi filtrare i caratteri in molti modi diversi, ad esempio per categoria:

  • Serif - Significato dei caratteri con linee ondulate alla fine, come Times New Roman.
  • Sans-Serif - Caratteri semplici senza gli scarabocchi, come Helvetica. I caratteri utilizzati in questo sito Web ne sono un esempio.
  • Schermo - Caratteri tipografici che possono essere utilizzati in dimensioni maggiori come i titoli.
  • Grafia - Vuoi che la tua tipografia sembri scritta a mano? Quindi questa è la tua impostazione.
  • Monospace - Tipografia in cui tutti i personaggi occupano lo stesso spazio, come questo.

Altri filtri includono:

  • Ordinamento - Ordina i caratteri dopo trend, popolari, data aggiunta o in ordine alfabetico.
  • Le lingue -Limita la scelta del carattere alle lingue non scritte nell'alfabeto latino come l'arabo, il tailandese o il vietnamita.
  • Un certo numero di stili -Scegli quanti stili disponibili sono necessari, ovvero se un carattere è disponibile in diversi spessori, corsivo, grassetto e altro.
  • Spessore - Scegli lo spessore desiderato del tuo carattere.
  • inclinazione - Come lo spessore ma per l'inclinazione. Si va da dritto a quasi orizzontale.
  • Larghezza - Filtra i caratteri in base alla larghezza delle lettere e alla spaziatura.

Quando applichi qualsiasi filtro, i risultati della tua ricerca si adattano in tempo reale. A sinistra, vedrai i caratteri disponibili nella tua categoria e frasi di esempio.

Quando passi con il mouse sopra un carattere, puoi utilizzare i menu a discesa in alto per far visualizzare a Google Fonts un paragrafo di esempio, l'intero alfabeto o numeri. Puoi anche semplicemente fare clic sul campo della frase e scrivere quello che vuoi.

modifica testo di esempio in caratteri Google

Inoltre, ci sono opzioni per modificare lo stile e le dimensioni del carattere. Quando apporti modifiche, hai anche la possibilità di applicarle a tutti i risultati della ricerca. Infine, guarda la pagina dei dettagli del font facendo clic Vedi campione.

pagina dei dettagli dei caratteri in caratteri Google

3. Aggiungi caratteri alla tua raccolta

Se ti piace un tipo di carattere particolare, puoi utilizzare il segno più rosso nell'angolo in alto a destra per aggiungerlo alla tua raccolta. In questo modo si aprirà un menu in basso in cui vengono visualizzati tutti i caratteri scelti.

caratteri selezionati in caratteri Google

Nota che puoi aggiungere più di una famiglia di caratteri. Questo ha senso, ad esempio, quando ne scegli uno per la copia del tuo corpo e un altro per le intestazioni.

4. Personalizza le impostazioni dei caratteri

Una volta che sei soddisfatto della tua collezione, fai clic sul menu in basso. In questo modo si aprirà questa schermata:

impostazioni dei caratteri in caratteri Google

Come puoi vedere, puoi trovare alcune parti di codice da incorporare e utilizzare i caratteri sul tuo sito. Questo diventerà importante in seguito. Per ora, fai clic sulla scheda che dice personalizzare. In questo modo si accede a questo menu:

personalizzare i caratteri nei caratteri di Google

Qui puoi selezionare gli stili dei caratteri in questione. Questo è importante se si desidera utilizzare caratteri di dimensioni diverse, come spesso accade.

Tuttavia, fai attenzione: più stili il tuo sito deve caricare, più rallenterà (Google Fonts ti fornisce persino un'indicazione della velocità di caricamento per la tua raccolta attuale in alto a destra). Quindi, pensa a ciò di cui hai veramente bisogno e scegli solo quello. A proposito, ci sono altri modi per velocizzare WordPress.

Se hai bisogno di una lingua diversa dall'alfabeto latino standard, assicurati di selezionarlo anche in fondo.

seleziona le lingue dei caratteri in Google Fonts

Oltre a ciò, tutto ciò che devi sapere sono le due icone a forma di freccia in alto.

pulsante scarica e condividi su google fonts

Quello a sinistra ti consente di visualizzare in anteprima e condividere la tua raccolta di caratteri. Quando si sceglie di farlo, si apre una pagina estesa in cui è possibile inserire un testo di esempio e vederlo in tutti i caratteri contemporaneamente. Questa pagina è anche buona da condividere con le persone.

Più importante è il pulsante di download accanto ad esso. Cliccandolo puoi scaricare i file dei caratteri per usarli sul tuo computer desktop (ad esempio, in Photoshop). Uso Skyfonts per tenerli aggiornati.

Successivamente, ti mostreremo anche un modo per caricare questi file sul tuo server e ospitare i caratteri direttamente sul tuo sito. Tienilo a mente per il futuro. Per ora, ti mostreremo una seconda libreria di font simili.

Fonte aggiuntiva per caratteri personalizzati

  • Consigliamo oltre 15 caratteri sicuri per il Web

Con quanto sopra, dovresti essere in grado di trovare qualcosa per te stesso. Un ultimo suggerimento: se non sai come combinare correttamente i caratteri, usa Coppia di caratteri dove i designer hanno fatto il lavoro per te.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map