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.
 |  |
Puoi personalizzare i caratteri nel tema Concept utilizzando uno dei due metodi seguenti:
Modifica codice liquido (altamente consigliato)
Ecco una guida in 9 passaggi per raggiungere questo obiettivo:
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 un numero sufficiente di file, caricali tramite [Dashboard amministratore] > [Contenuto] 1 > [File] 2 > [Carica] 3 .
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] 1 > [Temi] 2 > scegli Tema concettuale > fai clic su [Azione] 3 > [Modifica codice] 4 .
Nella finestra di modifica del codice aperta, vai alla cartella [Snippets] 1 nella colonna di sinistra. In questa cartella, fai clic sul file [css-variables.liquid] 2 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.
Dopodiché, tu:
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).
Cerca 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')
Dopo la sostituzione, appare come nella foto qui sotto:
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.
Utilizzando l'app RoarTheme
Sebbene Shopify offra una vasta raccolta di caratteri gratuiti, potresti aver bisogno di un carattere personalizzato per allinearti alle linee guida del tuo marchio. Se il carattere desiderato non è supportato nativamente da Shopify, non preoccuparti! Il nostro team ha sviluppato un'app che fornisce un'ampia gamma di opzioni di personalizzazione dei caratteri per migliorare il tuo web design. Scopri le possibilità e migliora l'estetica del tuo negozio con la nostra app .
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.
