Shopify fornisce centinaia di caratteri gratuiti da utilizzare per il tuo negozio. Tuttavia, devi utilizzare un carattere personalizzato per allinearti alle linee guida del tuo marchio ma non è supportato da Shopify, puoi comunque aggiungerlo al tuo tema. Ecco una guida su come farlo:
Devi prima avere il tuo carattere disponibile. Alcuni caratteri hanno licenze, quindi assicurati di acquistarli correttamente per il tuo utilizzo. Il nostro team di supporto non sarà responsabile di ottenere i caratteri richiesti.
Successivamente, prepara due file con il formato .woff e .woff2 per ogni stile di carattere da aggiungere. Questo per assicurarti che il carattere aggiunto sia leggibile su tutti i tipi di browser.
Dopo aver ottenuto file sufficienti, caricali nella cartella File in Impostazioni tema .
Tutti i file di font caricati hanno il pulsante a catena sul lato destro per fornire il collegamento al file per l'atto di copia.
Successivamente, torna alla dashboard di amministrazione, fai clic su Negozio online > Temi e scegli il tema Be Yours per modificarlo ulteriormente. Fai clic su Azioni > Modifica codice .
Nella finestra di modifica del codice aperta, accedi alla cartella Snippet nella colonna di sinistra. In questa cartella, fai clic sul file "css-variables.liquid" per aggiungere del codice personalizzato per il nuovo carattere.
Nel file aperto "css-variables.liquid", aggiungi codici aggiuntivi sotto lo stile della scheda. Può essere trovato sotto il testo {%- style -%} . I codici vengono aggiunti come segue:
@font-face {
famiglia di caratteri: " MyFontHeading ";
src: url(' aggiungi il collegamento al file del carattere ') format("woff2"),
url(' aggiungi il collegamento al file del carattere ') format("woff"); }@font-face {
famiglia di caratteri: " MyFontBody ";
src: url(' aggiungi il collegamento al file del carattere ') format("woff2"),
url(' aggiungi il collegamento al file del carattere ') format("woff"); }Nota : le sezioni di testo in corsivo sono personalizzate da te. Il numero di codici @font-face{ } da aggiungere dipende da quanti stili di carattere hai.
- Successivamente, cerchi il testo "font-body-family" per passare alla riga di codice pertinente e sostituisci tutte le parti di {{...}} con il testo aggiunto per font-family nei codici del passaggio 6 (nel nostro esempio, è "MyFontHeading"). Allo stesso modo, cerca il testo "font-heading-family" e sostituisci tutte le parti di {{...}} con il testo aggiunto per la riga font-family ("MyFontBody" nel nostro esempio).
- Dopo la sostituzione, appare come nella foto qui sotto:
- Infine, clicca su Salva .
Nota :
- Le impostazioni in Impostazioni tema > Tipografia non sono più attive, indipendentemente da ciò che configuri qui una volta aggiunti questi codici nel file "css-variables.liquid".
- Tutte le istruzioni sopra riportate sono applicabili quando applichi lo stesso carattere personalizzato per tutte le sezioni e tutti i blocchi. Nel caso in cui sia necessario applicare vari caratteri per sezioni o blocchi diversi, il processo di modifica sarà molto più complicato e contatta il nostro team di supporto per ottenere ulteriore aiuto.
Ci auguriamo che questo articolo ti sia utile! In caso di dubbi su questa funzionalità, non esitare a contattare il nostro team per ulteriore supporto.
