Come fare una guida per l'utilizzo di Google Fonts con Google e plugin!

Pubblicato: 2021-07-30

Google Font
Se sei un designer, è più probabile che consideri la tipografia come la base di qualsiasi design di un sito web. Non solo selezionando i caratteri, ma anche fornendo un vantaggio alla leggibilità delle pagine web.

Che cos'è la tipografia?
La tipografia consiste nel selezionare la lunghezza della linea, la dimensione in punti, l'interlinea, i caratteri tipografici e la regolazione degli spazi tra i gruppi di lettere.

Perché Google Fonts è una scelta chiara?
Ci sono stati momenti in cui Internet aveva caratteri standard che annoiavano chiunque li guardasse, ma con il passare del tempo, i web designer e gli sviluppatori sono stati costretti a limitare le loro scelte di caratteri di testo live e progettare i caratteri compatibili con il maggior numero di utenti su Internet. Hanno inventato CSS3. Typekit lo ha avviato.

Typekit ha sviluppato alcuni dei font allettanti che hanno aiutato i designer a selezionare font accattivanti e di facile utilizzo per le loro pagine web, ma l'unico problema nell'utilizzo di Typekit era il costo che addebitavano ai loro utenti.

Il prezzo era di $ 49 e nel caso in cui un designer volesse sviluppare due siti, doveva pagare $ 99 solo per l'utilizzo dei caratteri sulla pagina web. Grazie a Google che è venuto con i suoi fantastici design dei caratteri e lo ha offerto gratuitamente.

È abbastanza ovvio che non ottieni gratis ciò che puoi ottenere con i soldi, ma credeci, i Google Web Fonts erano comunque quelli offerti da Typekit. Naturalmente, i caratteri Web di Google sono i migliori quando non ti piace spendere troppo per i caratteri poiché sai che la costruzione di un intero sito Web costa troppo.

Caratteri Google e loro personalizzazione:
Ad oggi, nella libreria di Google sono presenti oltre 647 tipi di carattere separati per famiglie di caratteri. Quando selezioni un font per il contenuto del tuo sito web, è imperativo visualizzarlo in modo simile a come implementerai quel font. Alcuni caratteri sembrano perfetti per il contenuto del corpo ma sono terribili come intestazione.

Fortunatamente, Google Web Fonts ti consente di personalizzare la tua anteprima in modo che corrisponda al tuo caso d'uso. Puoi inserire un testo di anteprima personalizzato e modificare le dimensioni dell'anteprima come preferisci. È importante visualizzare in anteprima qualsiasi intestazione o copia del corpo che utilizzerai nella visualizzazione paragrafo e, se disponi di molte copie del corpo, non utilizzare troppi caratteri personalizzati.

Incanalare il carattere giusto!
Poiché siamo a conoscenza di oltre seicento famiglie di caratteri da vagliare, diventa difficile filtrare e scegliere quello giusto semplicemente scorrendole uno per uno. Quindi, usa i passaggi seguenti per perfezionare esattamente ciò di cui hai bisogno per il tuo sito web:

  • Dai una rapida occhiata ai caratteri che sono stati aggiornati di recente da Google. È probabile che otterrai il carattere di tendenza e privo di bug senza dover cercare il resto dei caratteri. Inoltre, guarda i caratteri utilizzati dalla maggior parte dei designer e sviluppatori. Ciò ti consentirà di conoscere i caratteri versatili che puoi utilizzare in più stili e larghezze.
  • Se conosci il carattere tipografico del tuo sito Web, le caratteristiche e lo stile dei caratteri possono migliorare i tuoi risultati come se desideri un carattere scritto a mano, disabilitare tutti gli altri tipi di risultati.
  • Google ti consente di perfezionare ulteriormente la ricerca dei caratteri aggiungendo spessore, inclinazione e larghezza del carattere come opzioni di filtro. Non è una caratteristica interessante per ottenere il miglior carattere per il tuo sito web?

Selezione dei caratteri
Google ha vari metodi per scegliere e quindi implementare i caratteri in base alle esigenze del proprietario di un sito web. Non c'è niente di giusto o sbagliato qui. Qualunque cosa sia meglio per te, la otterrai. Supporta tre pulsanti per aiutarti a scegliere il font giusto:

  • Uso rapido: per dare un'occhiata rapidamente al carattere che ti piace.
  • Pop out: per saperne di più sul carattere che ti piace, ovvero la sua funzionalità e usi.
  • Collezione: se desideri utilizzare più di due caratteri, Collezione è il pulsante su cui devi fare clic. Aggiungerà tutti i caratteri che ti piacciono su una singola pagina.

Come utilizzare i caratteri di Google?
Dopo aver selezionato i caratteri che desideri utilizzare sulla tua pagina web, puoi fare clic sulla scheda "Usa" per vederli in azione. Ora, quando sei sicuro del carattere, tutto ciò di cui hai bisogno è semplicemente copiare e incollare del codice sulla tua pagina web. Avrai tre opzioni tra cui scegliere:

Standard:
È un collegamento a un foglio di stile standard. Devi inserirlo nella parte principale del tuo file HTML, risparmiandoti così il passaggio di aggiungere la regola @import poiché stai aggiungendo in modo significativo un foglio di stile che lo ha già inserito. Esempio:

CSS:
Usa la regola CSS @import nel caso in cui non desideri collegarti al foglio di stile generato automaticamente nell'intestazione. Usa il codice seguente per integrare i caratteri nel tuo CSS:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google e Typekit, entrambi hanno sviluppato questo codice qui come parte del caricatore WebFont per offrire agli utenti un maggiore controllo sul caricamento dei caratteri.

Prendi uno snippet HTML e mettilo vicino all'intestazione HTML come:

Titolo della pagina

Vai al CSS e segui questo:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Con l'aiuto dei plugin!
Sono disponibili alcuni plug-in che offrono una perfetta integrazione di Google Font. L'uso dei plug-in ha i suoi limiti come un plug-in non saprà cercare un testo particolare senza personalizzare ulteriormente con l'aiuto di HTML o CSS. Tuttavia, ecco alcuni plugin per includere i caratteri di Google nel tuo sito web.

1. Plugin di caratteri
Plugin di caratteri

È un modo semplice ed efficace per inserire i caratteri di Google nel tuo sito Web con pochi clic. Puoi usare il tuo foglio di stile o usare lo stile CSS; entrambi lavoreranno per adattarli al tuo tema. Puoi farlo dall'area di amministrazione o dal foglio di stile del tuo sito web. Fonts Plugin è tutto ciò di cui hai bisogno per il tuo sito web, in modo rapido ed efficiente.

2. Caratteri Google facili
Font Google facili

Con il plug-in Easy Google Fonts, non è necessario toccare alcun codice per ottenere i caratteri sul tuo sito web. Dalla scelta all'ottimizzazione e dal dare colori unici da vivere all'anteprima, tutto con i caratteri può essere fatto utilizzando Easy Google Fonts.

3. TK Google Fonts
tK caratteri Google

TK Google Fonts aggiungerà tutti i 291 caratteri Web di Google nel pannello dell'editor visivo durante lo sviluppo di pagine o post. Basta installarlo e iniziare a usarlo.

Installazione dei plugin di cui sopra:

  • Accedi all'amministratore di WordPress
  • Fare clic su "Plugin"
  • Fai clic su "Aggiungi nuovo"
  • Digita il nome del plug-in nell'angolo in alto a destra e fai clic su "installa ora"

Per personalizzare i plugin

  • Fare clic su "Aspetto" e quindi su "Personalizza".
  • Clicca su “Visita il sito” e poi su “Personalizza”
  • Noterai un nuovo menu aggiunto come "Tipografia"

Implementare l'apprendimento!
Ci auguriamo che la lettura dell'articolo sia stata una lezione di apprendimento da utilizzare e ora è il momento di utilizzare questa conoscenza sul tuo sito web. Sfoglia vari tipi di carattere, plugin per migliorare la tipografia nei tuoi siti web. Tieni presente che se stai personalizzando un carattere, sarà più vantaggioso del semplice copiare e incollare un carattere. Facci sapere i caratteri e i metodi che usi per aggiungere la tipografia per attirare il tuo pubblico nei tuoi progetti.

I caratteri migliorano la forma estetica di un sito Web e sono alla base del design di qualsiasi sito Web. I caratteri o la tipografia riguardano la selezione della lunghezza della linea, la dimensione in punti, l'interlinea, i caratteri tipografici e la regolazione degli spazi tra le lettere del gruppo.

Come designer, è sempre bene perfezionare ulteriormente la ricerca dei caratteri aggiungendo spessore, inclinazione e larghezza del carattere come opzioni di filtro. Non tutti i caratteri hanno un bell'aspetto nel corpo e/o nel contenuto dell'intestazione.

Alcuni caratteri non hanno un bell'aspetto come intestazione e altri non possono essere letti facilmente sul contenuto del corpo. Pertanto, è consigliabile visualizzare il carattere selezionato in modo simile a come lo implementerai in modo da poterne testare la leggibilità.

Sono finiti i giorni in cui Internet aveva gli stessi vecchi caratteri standard noiosi. Tecnologia avanzata e web designer e sviluppatori sono stati costretti a progettare caratteri compatibili con il maggior numero di utenti su Internet.

Hanno inventato CSS3. Typekit lo ha avviato e ha sviluppato alcuni dei font allettanti e accattivanti che i web designer possono utilizzare. Ma erano troppo costosi. Per fortuna, Google è venuto in soccorso e ha offerto gratuitamente design dei caratteri brillanti e intuitivi.

Incanalare il carattere giusto!

Attualmente, il numero di caratteri nella libreria di Google è pari a 647, il che rende difficile filtrare e scegliere quello giusto. Tuttavia, con questi 3 passaggi, puoi ottenere esattamente ciò di cui hai bisogno per il tuo sito web:

  • Dai un'occhiata ai font aggiornati di recente su Google e ottieni un font di tendenza e privo di bug. Inoltre, cerca i caratteri utilizzati dalla maggior parte dei designer per conoscere la versatilità dei caratteri che puoi utilizzare in più stili e larghezze.
  • Conosci il carattere tipografico del tuo sito web, le caratteristiche e lo stile dei caratteri per migliorare i tuoi risultati.
  • Affina la ricerca dei caratteri aggiungendo spessore, inclinazione e larghezza del carattere come opzione di filtro.

Selezione dei caratteri

A seconda delle tue esigenze, Google ha diversi metodi per aiutarti a selezionare un carattere. Per scegliere il font giusto, considera:

Accesso rapido: per dare un'occhiata rapidamente al carattere che ti piace

Pop Out- Per saperne di più sul font, ovvero funzionalità e usi

Collezione: se desideri utilizzare più di due caratteri, fai clic su questo pulsante. Aggiungerà tutti i caratteri che ti piacciono su una singola pagina.

Come utilizzare i caratteri di Google

Dopo aver selezionato il tuo carattere preferito, fai clic sulla scheda "Usa" per vederli in azione. Quindi, copia e incolla del codice sulla tua pagina web. Avrai tre opzioni tra cui scegliere:

Standard -Questo è un collegamento a un foglio di stile standard. Inseriscilo nella parte principale del tuo file HTML. Ti salverà il passaggio di aggiungere la regola @import poiché stai aggiungendo in modo significativo un foglio di stile che già lo ha.

CSS : utilizza la regola CSS @import nel caso in cui non desideri collegarti al foglio di stile generato automaticamente nell'intestazione . Usa il codice seguente per integrare i caratteri nel tuo CSS:

famiglia di caratteri: 'Henry Pigeous', serif;
 font-family: 'Diplomatico'. corsivo;

JavaScript -Google e Typekit, hanno entrambi sviluppato questo codice qui come parte del caricatore di caratteri Web per offrire agli utenti un maggiore controllo sul caricamento dei caratteri .

Prendi uno snippet HTML e mettilo vicino all'intestazione HTML come:

Titolo della pagina

Vai al CSS e segui questo:

h1 {

font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;

}

P {

font: 400 14px/1.5 'Henry Pegasus', Times, serif;

}

Circa l'autore:
Catherrine Garcia è una Web Developer esperta presso Hosting Facts e una blogger appassionata. Ama condividere le sue conoscenze attraverso i suoi articoli sullo sviluppo web e WordPress.