custom font elementor

Custom Fonts! Usare Typekit ed i propri Font con Elementor

Vediamo come utilizzare Typekit ed i propri font con Elementor.

Elementor introduce i Custom Font. Aggiungi i tuoi font self-hosted o Typekit ed usali sui tuoi progetti Elementor per creare un linguaggio brand unico.

custom font elementor

In Elementor è sempre stata posta la massima priorità nel fornirti la più ampia flessibilità tipografica, dal momento che la tipografia gioca un ruolo chiave nel web design.

Fin dal primo giorno, è stato offerto il controllo visivo su impostazioni tipografiche come dimensione del carattere, altezza della linea, spaziatura delle lettere e decorazione del testo (aggiunta di recente alla versione 1.9). Elementor dispone di oltre 800 differenti Google font tra cui scegliere.

A volte, tuttavia, i Google font predefiniti non sono sufficienti.

Molti web designer vogliono essere in grado di creare quello stile extra branded e professionale ottenuto solo con caratteri personalizzati.

Ora Elementor offre in tutta semplicità un nuovo modo per caricare i tuoi font personalizzati.

Carica semplicemente i tuoi formati di font personalizzati e guardali comparire immediatamente all’interno delle impostazioni di tipografia del widget. E’ stata aggiunta anche un’integrazione perfetta con i font Typekit, consentendoti di sincronizzare ed utilizzare tutti i tuoi font Typekit con un semplice clic.

Per permettere ai visitatori di vedere i font personalizzati nel tuo sito, i font devono essere caricati sul tuo sito con un formato di file standard. Esistono diversi formati di font, ognuno con la propria compatibilità nei diversi browser.

In Elementor è stato semplificato il caricamento dei formati dei Web Font personalizzati:

  • Naviga nella dashboard di WordPress> Elementor> Font personalizzati e fai clic su “Aggiungi nuovo”.
  • Aggiungi un font caricando i file WOFF, WOFF2, TTF, SVG o EOT. Si consiglia di caricare quanti più file di font possibili, in modo di fornire supporto per il numero massimo di browser.
  • Una volta caricati, i tuoi nuovi font personalizzati saranno disponibili nei controlli tipografici di ogni widget che contiene testo.

Inserisci i tuoi Font in Elementor

I formati dei font includono:

  • The Web Open Font Format (WOFF) – WOFF è il formato più consigliato da utilizzare, poiché è supportato da tutti i browser moderni
  • The Web Open Font Format (WOFF 2.0) – Font TrueType / OpenType che fornisce una compressione migliore rispetto a WOFF 1.0
  • TrueType Fonts (TTF) – questo font è stato sviluppato alla fine degli anni ’80 da Apple e Microsoft
  • SVG Fonts/Shapes i caratteri SVG consentono di utilizzare SVG come glifi durante la visualizzazione del testo. Assicurati di utilizzare questo formato per supportare le vecchie versioni di iPhone
  • Embedded OpenType Fonts (EOT) – Questo file di font funziona su IE, ma non su altri browser. Assicurati di utilizzare questo formato per supportare le versioni precedenti di IE

Approfondisci le informazioni sui tipi di font su W3Schools.

Dimensioni dei Font e Stili

I caratteri personalizzati sono raggruppati in famiglie. Ogni famiglia di caratteri include il proprio set di dimensioni e stili, caricati separatamente.

Una famiglia di font può includere un set di dimensioni, compreso tra 100 e 900, nonché attibuti Normali, Grassetto, Grassetto o Leggero. Può anche includere caratteri Normali, Obliqui o Corsivi. Qualsiasi variazione di dimensione e stile può essere aggiunta separatamente al gruppo Famiglia di caratteri.

Una volta caricate le varianti dei font, sarai in grado di scegliere il font all’interno di Elementor e regolarne la dimansione e lo stile di conseguenza.

Nota: se non carichi una certa dimensione, non sarà disponibile nell’editor. Mentre i browser che lo supportano riporteranno la dimensione disponibile più vicina.

Adobe Typekit è ora disponibile in Elementor

Adobe Typekit è un servizio in abbonamento per font che puoi sincronizzare con il tuo computer od utilizzare su un sito web. Con Typekit, puoi scaricare uno qualsiasi delle migliaia di font disponibili ed usarli sul tuo sito.

Adobe offre 2 font Typekit gratuiti, quindi puoi prima provarlo e vedere se ti piace.

Il più grande vantaggio dell’uso di Typekit nei progetti di web design è la sua perfetta integrazione. I designer, che già utilizzano Photoshop, ottengono l’accesso istantaneo a migliaia di font professionali dalla propria interfaccia, tutti sincronizzati e di facile utilizzo. Non c’è bisogno di gestire download di font o installazioni confusionarie.

Typekit funziona perfettamente con Elementor. Basta inserire la key Typekit nella dashboard delle impostazioni (scheda Integrations) e ottenere istantaneamente tutti i font Typekit all’interno delle varie impostazioni tipografiche di Elementor. Utilizzando questa integrazione, non è necessario scaricare, installare o codificare nulla per utilizzare i font Typekit.

Passare da Photoshop PSD a un progetto WordPress dal vivo non è mai stato più semplice, grazie a questo tipo di integrazione.

Navigando Elementor> Impostazioni> Integrazioni è possibile aggiungere l’ID del Kit Typekit. Dopo averlo aggiunto, fai clic su “Kit di sincronizzazione”. Aspetta qualche minuto e dovresti vedere tutti i tuoi font Typekit in Elementor. Dopo aver aggiunto nuovi font al tuo account Typekit, non dimenticare di tornare nella pagina delle integrazioni e sincronizzare di nuovo i tuoi font.

Nota: potrebbero essere necessari alcuni minuti per l’aggiornamento della rete CDN da parte di Adobe e l’inserimento dei font in Elementor, quindi attendqualche minuto dopo aver aggiunto la key Typekit in Elementor.

scheda font elementor
font-typekit-elementor

Font personalizzati dentro l'editor di Elementor

Dopo aver aggiunto i tuoi font personalizzati, vai su Elementor e inizia a usare i nuovi font nelle tue pagine.

Aggiungi un’intestazione o qualsiasi altro widget di testo e in Stile> Tipografia scegli il carattere personalizzato od il carattere Typekit.

I nuovi caratteri personalizzati ed i font Typekit dovrebbero apparire sopra i Google Font. Inizia a progettare e creare fantastici siti web!

Ti piace questo articolo? Commentalo con noi nel gruppo Facebook dedicato Elementor Pro Italia.

Trovi la versione di questo articolo in lingua inglese cliccando qui.

 

Roberto Marinello

Roberto si occupa di web da quasi 20 anni, vive con 2 cani ed è (quasi) sempre felice

Elementor-Pro-Italia.it is run by a 3rd party and not associated, or act on behalf of Elementor or Pojo Themes. Elementor is a registered trademark of Pojo Themes.