Perché il mio logo SVG cambia font?

Perché un SVG può ancora dipendere da un font

SVG può memorizzare testo modificabile oltre alle forme vettoriali. Un oggetto di testo può indicare il nome di un font senza includerlo. Se il visualizzatore non può accedervi, potrebbe essere usato un altro font. Questo cambia le forme delle lettere e può cambiare anche la larghezza del wordmark.

Il browser seleziona fra le famiglie di font disponibili; singoli caratteri possono ricorrere a un font alternativo quando manca un glifo necessario. Ecco perché un accento, un simbolo o una singola lettera può apparire sbagliata anche quando il resto sembra corretto. Anche il CSS può sovrascrivere un attributo font-family dell’SVG.

Convertire le lettere approvate in tracciati ne memorizza le forme visibili come percorsi vettoriali. Il destinatario non ha più bisogno di quel font per disegnare quelle lettere. È una scelta di consegna utile per un logo fisso, mentre il sorgente modificabile resta disponibile per modifiche future.

Approfondimenti: MDN: come font-family seleziona i font · MDN: font-family SVG e CSS · Adobe: convertire il testo in tracciati vettoriali

Individua il primo punto in cui cambiano le lettere

Tieni il riferimento del logo approvato accanto al documento sorgente e al file esportato. Confronta la stessa variante a dimensioni simili. Segui il file dal sorgente all’esportazione fino alla destinazione, così puoi circoscrivere il problema prima di cambiare le impostazioni.

Verifica il font corretto prima di creare i tracciati

Parti da un master modificabile e da un riferimento certamente approvato. Se l’applicazione segnala un font mancante, risolvi prima il problema. Convertire in tracciati il font sostitutivo ne fissa le forme: non può recuperare il design previsto.

Per esempio, se il logo approvato usa uno specifico stile semibold ma il sorgente ora mostra regular, convertire quel testo regular in tracciati conserva lo spessore sbagliato. Il comando di conversione ha fatto il suo lavoro, ma la grafica va ancora corretta.

• ✓Verifica famiglia, stile ed eventuali impostazioni del font variabile rispetto al sorgente approvato.
• ✓Controlla ortografia, accenti, punteggiatura, modifiche personalizzate delle lettere e legature.
• ✓Confronta la spaziatura fra lettere, la linea di base e la distanza fra simbolo e wordmark.
• ✓Salva separatamente il master modificabile. Usa la conversione in tracciati durante l’esportazione o una copia per la consegna dal nome chiaro.
• ✓Converti ogni elemento di testo che appartiene al logo fisso, compreso un eventuale payoff approvato.

Illustrator: converti in tracciati all’esportazione o in una copia per la consegna

Scegli l’approccio adatto alla tua consegna. La conversione in tracciati durante l’esportazione ti permette di conservare il testo modificabile nel master.

1. Apri il sorgente corretto e scegli File → Export → Export As, poi seleziona SVG.
2. In SVG Options, imposta Font su Outlines ed esporta.
3. Apri l’SVG salvato in un browser e confrontalo con il logo approvato.

Se ti serve una copia di lavoro con testo convertito in tracciati, duplica il documento, seleziona il testo del logo e scegli Type → Create Outlines. Mantieni intatte le forme delle lettere e i loro spazi interni; non serve rilasciare i tracciati composti solo per esportare un normale wordmark.

Usi invece Save As o Save a Copy? In quella finestra SVG, l’opzione per i font si chiama Convert To Outlines. I nomi dei controlli differiscono fra i flussi di esportazione.

Approfondimenti: Adobe: opzioni di esportazione SVG · Adobe: Create Outlines · Adobe: opzioni Save As SVG

Figma: mantieni attivo Outline text per l’SVG

Figma documenta la conversione in tracciati del testo SVG come impostazione predefinita. Controlla l’impostazione nell’esportazione che stai effettivamente usando.

1. Seleziona il frame o i livelli del logo approvato e scegli SVG nella sezione Export.
2. Apri le impostazioni di esportazione specifiche del formato e mantieni attivo Outline text.
3. Esporta l’SVG ed esamina il file scaricato.

Questo converte il testo nell’esportazione lasciando disponibile per la modifica il testo sorgente. Disattivare Outline text mantiene modificabile il testo esportato, quindi occorre verificare la disponibilità dei font nella destinazione.

Continua con: Flusso completo di esportazione dei loghi da Figma

Approfondimenti: Figma: impostazioni SVG e Outline text

Affinity: usa una copia con testo convertito in curve

Affinity usa il termine Convert to Curves per trasformare gli oggetti selezionati in tracciati vettoriali modificabili. Conserva il testo nel master, converti le lettere approvate in una copia per la consegna ed esamina l’SVG esportato. I controlli di esportazione differiscono fra l’app Affinity attuale e Affinity Designer 2: segui il flusso per la tua versione.

Continua con: Guida all’esportazione dei loghi da Affinity

Approfondimenti: Affinity: Move Tool e Convert to Curves

Verifica l’SVG effettivo, poi la sua destinazione

Apri il file che hai salvato o scaricato, anziché affidarti all’area di lavoro del design o all’anteprima di esportazione. Se un sito web elabora i caricamenti o ottimizza gli SVG, esamina anche il file effettivamente servito dal sito.

Prova l’SVG nel contesto previsto, anche come elemento immagine o sfondo CSS. I browser possono limitare le risorse esterne quando SVG viene usato come immagine, quindi un file che appare corretto nella propria scheda del browser potrebbe comunque essere renderizzato diversamente sul sito web.

• ✓Confronta lettere distintive, accenti, legature e spazi interni di lettere come A, B e O.
• ✓Controlla larghezza del wordmark, spaziatura fra lettere, linea di base e allineamento del simbolo.
• ✓Osserva il logo alla piccola dimensione di visualizzazione prevista, oltre che ingrandito per il controllo.
• ✓Controlla ogni variante colore approvata sullo sfondo previsto.
• ✓Verifica che payoff e piccoli segni siano inclusi e che nessuna lettera sia tagliata.
• ✓Chiedi al destinatario di controllare esattamente quel file nell’applicazione o nel sito web in cui verrà usato.

Approfondimenti: MDN: SVG usato come immagine · MDN: elementi di testo in SVG

Se le lettere convertite in tracciati appaiono ancora sbagliate

Per prima cosa verifica che le lettere interessate siano davvero tracciati nel file in uso. Se lo sono, modificare font-family non ne ridisegnerà la geometria. Confronta la prima esportazione con il testo convertito in tracciati con il sorgente, poi procedi una fase alla volta.

• Lettere con forme sbagliate subito dopo la conversione in tracciati: confronta il sorgente con il riferimento approvato e controlla se un font fosse già stato sostituito.
• Spazi interni mancanti o forme interrotte: controlla tracciati composti, riempimenti, ritagli e qualsiasi pulizia eseguita dopo la conversione.
• Geometria diversa dopo l'ottimizzazione: confronta il file con l'esportazione non ottimizzata e verifica la precisione delle coordinate o la semplificazione dei tracciati.
• Cambiamento visibile solo sul sito: controlla il file effettivamente servito e gli stili della pagina, inclusi riempimenti e tracce, oltre alle dimensioni di visualizzazione.
• Lettering con font a colori o effetti speciali: consulta la documentazione del font e dell'app. Adobe elenca problemi specifici di esportazione e conversione in tracciati per i font a colori OpenType-SVG.

Approfondimenti: Adobe: impostazioni di precisione SVG · Adobe: problemi dei font a colori OpenType-SVG

Tieni conto delle esigenze di modifica e accessibilità

Il lettering convertito in tracciati rimane grafica vettoriale, ma i suoi caratteri non sono più normale testo modificabile. Conserva il master con testo vivo per modifiche ai contenuti, localizzazioni e futuri interventi tipografici. La conversione può anche aumentare i dati dei tracciati, quindi confronta le dimensioni finali del file senza presumere che l'esportazione sia più leggera.

Fornisci allo sviluppatore un nome accessibile adatto insieme alla risorsa. Per un logo che costituisce l'unico contenuto di un link alla homepage, un esempio è «Home di Morrow Quay». Se lo stesso link contiene già un testo visibile equivalente, evita un annuncio duplicato. Le indicazioni del W3C sulle immagini funzionali spiegano questa distinzione.

Mantieni titoli, corpo del testo ed etichette dell'interfaccia come testo reale, quando possibile. Trasformare il logo in tracciati non gli assegna automaticamente un nome accessibile e non rende il sito accessibile.

Controlla la licenza del font applicabile prima di includere i file dei font nella consegna. Adobe Fonts, ad esempio, distingue la consegna della grafica finita dalla necessità del cliente di avere una propria licenza per accedere direttamente al font e modificarlo. Gli altri font hanno condizioni proprie.

Continua con: Documenta font e requisiti di licenza per la consegna al cliente

Approfondimenti: W3C WAI: loghi accessibili usati come link · Adobe Fonts: domande frequenti sulle licenze

Prepara il pacchetto della grafica verificata

Quando il lettering esportato corrisponde al progetto approvato, usa quell'SVG verificato come punto di partenza per le risorse del cliente. Su logopack.app puoi vedere gratuitamente l'anteprima di un pacchetto; per scaricare lo ZIP del pacchetto logo serve Pro. Consulta i piani attuali per i dettagli sull'esportazione.

Se logopack.app segnala che l'SVG contiene testo, torna nell'app di progettazione e converti il lettering approvato in tracciati o curve. La correzione dei font va fatta nel progetto sorgente: un generatore di pacchetti non può recuperare il carattere previsto da un logotipo con font sostituito.

Continua con: Scegli i file da consegnare al cliente · Confronta i formati dei file del logo

Domande frequenti sui font negli SVG

Approfondimenti: MDN: usare i font negli SVG