Installare Elegant Custom Fonts
Per installare il nostro font personalizzato su Oxygen ci serviremo del plugin gratuito Elegant Custom Fonts, realizzato da Louis Reingold (che è il fondatore di Solfyy, società che sta dietro a Oxygen).
Puoi trovare il plugin direttamente nella libreria dei plugin di WordPress:
Una volta installato e attivato il plugin, possiamo recarci nelle sue impostazioni dal menu di WordPress, andando in "Impostazioni > Fonts".
A questo punto non ci resta che aggiungere la famiglia del nostro font personalizzato, quindi clicchiamo sul pulsante "Add Font Family", digitiamo il nome del nostro font e clicchiamo sul pulsante di conferma:
Caricare il font personalizzato sul server
A differenza dei font di Google, Oxygen non può richiamare i font personalizzati che installiamo se non prima indichiamo qual è la loro posizione. Dobbiamo quindi accedere alla cartella pubblica del nostro server (attraverso il pannello di controllo dell'hosting) e caricare sul server il font.
Nello specifico, dovrai accedere alla cartella principale del sito web (in genere si chiama "public_html", "html_file", "http_file" o simile), successivamente crea una nuova cartella in cui inserire il font.
La cartella può chiamarsi come vuoi, io solitamente la chiamo "Fonts". Una volta creata la cartella, carica al suo interno il file del font, come vedi nell'immagine seguente:
Individuare l'URL del font personalizzato
Ora che abbiamo caricato il font personalizzato sul server possiamo ricavarne l'URL da specificare su Elegant Custom Fonts.
L'URL del font dovrebbe rispettare questa espressione:
https://nomesitoweb.com/nomecartella/nomefont.estensione
Nel mio caso ho creato una cartella chiamata "Fonts", dove al suo interno ho caricato il file del font, che a sua volta è chiamato "Kiona-Regular.ttf", di conseguenza, l'URL del mio font è il seguente:
https://nomesitoweb.com/Fonts/Kiona-Regular.ttf"
Assicurati di rispettare le maiuscole e i simboli utilizzati 🙂
Aggiungere il font alla famiglia di font
Ora torniamo su Elegant Custom Fonts e clicchiamo sul pulsante blu "Add Font Face" per aggiungere il nostro font personalizzato alla famiglia precedentemente creata.
Specifica lo spessore del font, lo stile e inserisci l'URL che abbiamo individuato poco fa, dopo di che clicca nuovamente su "Add Font Face" per confermare la modifica.
Se il font che utilizzi dispone di più spessori allora dovrai ripetere quest'ultima operazione, andando a modificare ogni volta lo spessore, inserendo così - per esempio - lo spessore 300, 400 e 600. In questo modo avrai a disposizione il font in più spessori lavorando su Oxygen.
Impostare il font personalizzato su Oxygen
Benissimo, ora non ci resta che accedere al visual editor di Oxygen Builder per iniziare a usare il font personalizzato!
Il font sarà fin da subito disponibile all'interno di qualsiasi menu a tendina per la selezione del font, ma tipicamente quando si usa un font custom si va a specificarlo negli stili globali, così che possa venir sostituito su tutti i testi.
Quindi clicca su "Manage" e poi su "settings". Una volta aperta la barra laterale di destra, clicca su "Global Styles" e poi su "Fonts".
Scegli se utilizzare il font personalizzato di default in tutti i titoli, nei testi o in entrambi, selezionandolo dal menu a tendina.
Ed ecco qui che il gioco è fatto 😀
Ti ringrazio per aver letto questa guida e ti ricordo di iscriverti al nostro canale YouTube per accedere a un sacco di video tutorial su Oxygen Builder! Alla prossima 🙂
Mi chiamo Vincenzo Iracà e insieme a Stefano Lavazza abbiamo fondato la nostra Agenzia Web. In Klorofilla realizziamo siti web professionali e landing page mirate a ottenere elevati tassi di conversione.
Da diversi anni sviluppiamo i progetti dei nostri clienti su WordPress tramite Oxygen Builder. Abbiamo deciso di contribuire in maniera attiva alla diffusione di questo page builder, che attualmente possiamo considerare il migliore sul mercato, tramite questo blog e la nostra community su Facebook.
