Aggiungi un font personalizzato al mio tema tramite il repository degli asset

[Joart]

Ciao,
Sto cercando di aggiungere un font personalizzato al mio tema ma non funziona… Ho sicuramente fatto qualcosa di sbagliato ma non riesco a trovare dove.

• Sto sviluppando il mio tema che ho installato tramite GitHub.
• Nel repository degli asset, ho caricato i miei font che non sono Google Fonts:

• In about.json, ho importato i file:

• Nel mio repository scss, ho creato le mie famiglie di font:

Ho provato ad aggiungere: format(‘woff2’) ma non funziona neanche.

• E poi:

Beh, non funziona… Qualche idea?

[pfaffman (Jay Pfaffman)]

Non sono sicuro di quale possa essere il problema. Darei un’occhiata a Includi risorse (ad es. immagini, font) in temi e componenti. Mi dispiace se non è utile.

[southpaw]

Ciao @Joart,

Sono sicuro di semplificare eccessivamente, ma noto che nello snippet di about.json, il percorso dei font punta a una cartella assets, mentre nel tuo CSS, il percorso punta a una cartella fonts. Sei sicuro che il percorso di origine del CSS sia corretto?

[awesomerobot (Kris)]

@southpaw

Sei sicuro che il percorso sorgente CSS sia corretto?

Questa è un’ottima osservazione, ma non vuoi usare il percorso nel tuo CSS in questo modo, dovresti fare riferimento ai file usando il nome dell’asset come variabile:

@font-face {
   font-family: supply-light;
   src: url($supply-light);
}

Questo è trattato in Include assets (e.g. images, fonts) in themes and components

[Joart]

Ci ho provato ma non funziona

[pfaffman (Jay Pfaffman)]

È difficile indovinare il motivo. Potresti mettere il tuo tema su GitHub e collegarlo o pubblicare il tuo codice qui.

Hai seguito l’esempio fornito da @awesomerobot?

[southpaw]

Ciao @Joart,

Ho giocato un po’ con questo su un’istanza Discourse abbastanza nuova e ho avuto qualche problema con i primi font che ho provato. Li avevo convertiti in .woff2 usando un convertitore online gratuito, e penso che forse non abbia fatto un buon lavoro.

Quando ho provato con un font .otf e di nuovo con un altro font .woff2 convertito da un convertitore più affidabile, sono stato in grado di aggiungere il font personalizzato utilizzando i passaggi nella guida a cui @pfaffman e @awesomerobot hanno linkato.

Ci sono voluti solo due passaggi: caricare il file usando la modale Aggiungi caricamento e aggiungere solo le righe @font-face e body dell’esempio SCSS al tema o componente.

Sono sicuro che se riesci a darci maggiori dettagli e condividere il tuo codice e i font, possiamo aiutarti a risolvere questo problema.

[Joart]

Sì, grazie! Ho provato con il formato ttf e funziona!