Inserire font in un file SVG

[Veronica80]

Ciao a tutti,
sto cercando di includere un font dentro un file SVG usando questo codice:

    <defs>        <style>
			.cls-1{
                isolation:isolate;
				font-size:47px;
                font-family: "Renaissance-Regular, Renaissance";
                src: url('fonts\renaissance\renaissance-webfont.woff');
            }
            .cls-1, .cls-2{
                fill:#fff;
            }
            .cls-3{
                fill:none;
            }
            .cls-4{
                fill:#f6f6f6;
            }
        </style>
          
    </defs>

Però l'immagine continua ad avere il font base.

Se in locale però installo il font .TFF allora riesco a vedere la scritta col font corretto.
Dacchè l'immagine andrà su web come posso risolvere?
Cosa sto sbagliando?

Grazie!

[KillerWorm]

Ciao, personalmente non ho molta esperienza riguardo le definizioni per svg ma vedo qualcosa che stona:

1 - nel path dentro url() stai usando il backslash (\), dovresti invece usare il normale slash (/). Verifica inoltre che il percorso sia esatto e punti correttamente a quel file woff.

2 - non dovresti usare la regola @font-face per includere il font in quel modo?

[Veronica80]

Ciao, personalmente non ho molta esperienza riguardo le definizioni per svg ma vedo qualcosa che stona:

1 - nel path dentro url() stai usando il backslash (\), dovresti invece usare il normale slash (/). Verifica inoltre che il percorso sia esatto e punti correttamente a quel file woff.

2 - non dovresti usare la regola @font-face per includere il font in quel modo?

1) Ho provveduto a invertire gli slash ma nulla...
2) Si teoricamente si ma a me servirebbe la classe per avere quel font solo in un punto della SVG...Ho provato anche con @font-face ma niente...

ps: ho anche aggiunto format("woff") dopo l'URI.

[Vincent.Zeno]

   
src: url('fonts\renaissance\renaissance-webfont.woff');

Se in locale però installo il font .TF allora riesco a vedere la scritta col font corretto.
Dacchè l'immagine andrà su web come posso risolvere?

la risposta sta nella domanda stessa: metti il percorso verso il server che fornirà il font.

[Veronica80]

la risposta sta nella domanda stessa: metti il percorso verso il server che fornirà il font.

Il percorso è relativo...quindi sia in locale che sul web è sempre lo stesso

[KillerWorm]

Si teoricamente si ma a me servirebbe la classe per avere quel font solo in un punto della SVG...Ho provato anche con @font-face ma niente...

Potrei sbagliarmi ma a prescindere dalle classi, penso che il font vada comunque incluso sul documento, per cui puoi farlo attraverso il @font-face. A quel punto puoi applicare tale font per qualsiasi selettore (quindi la tua classe) semplicemente definendo la proprietà font-family.

Inoltre ho l'impressione che le virgolette, attorno alla serie di valori in font-family, siano di troppo.

Potrebbe essere una cosa del genere:

<style>
@font-face {
   font-family: Renaissance-Regular, Renaissance;
   src: url('fonts/renaissance/renaissance-webfont.woff');
}
.cls-1{
   isolation:isolate;
   font-size: 47px;
   font-family: Renaissance-Regular, Renaissance;
 }
/* ... */
</style>

Ancora, il percorso relativo fa riferimento alla posizione del file svg, controlla quindi che da quella posizione sia esatto per raggiungere il file woff.

[Veronica80]

Potrei sbagliarmi ma a prescindere dalle classi, penso che il font vada comunque incluso sul documento, per cui puoi farlo attraverso il @font-face. A quel punto puoi applicare tale font per qualsiasi selettore (quindi la tua classe) semplicemente definendo la proprietà font-family.

Inoltre ho l'impressione che le virgolette, attorno alla serie di valori in font-family, siano di troppo.

Potrebbe essere una cosa del genere:



Ancora, il percorso relativo fa riferimento alla posizione del file svg, controlla quindi che da quella posizione sia esatto per raggiungere il file woff.

Grazie Killer!!!! Mi hai dato l'imbeccata giusta! Allora...ho ricreato il webfont (in tff però e su base64) ed ho incluso così:

            @font-face {                font-family: 'renaissance_regular';
                src: url('fonts/renaissance-webfont.eot');
                src: url('fonts/renaissance-webfont.eot?#iefix') format('embedded-opentype'),
                 url('fonts/renaissance-webfont.ttf') format('truetype'),
                 url('fonts/renaissance-webfont.svg#renaissance_regular') format('svg');
                font-weight: normal;
                font-style: normal;
            }


    
            .cls-1{
                isolation:isolate;
                font-size:47px;    
                font-family:"renaissance_regular";            
            }

ora se apro (col browser) il mio SVG me lo da col font!

Il problema è che il file SVG è un logo della homepage (index.php) del sito, e quando lo visualizzo sul sito (quindi senza eseguirlo direttamente) il problema ritorna...ho pensato che essendo in index.php magari dovevo correggere i percorsi in modo che il ROOT fosse appunto index.php...ma nulla...
Sento che son a un passo dalla soluzione ma non la vedo!

[KillerWorm]

Non so, dovrei vedere la pagina in azione per poter capire.
Posta un link se ti è possibile.

In alternativa potresti impostare il percorso apponendo uno slash iniziale che farà riferimento alla root:

'/fonts/renaissance-webfont.ttf'

in questo modo il percorso è sempre relativo ma parte dal livello principale (la root del tuo spazio web)
Per cui il file si troverà in

'https://tuosito.foo/fonts/renaissance-webfont.ttf'

[Veronica80]

Niente...non va

Ho provato a creare una pagina html di prova con un semplice tag <img>, mettendo tutto nella stessa cartella.

<img src="logo-default.svg" /><a href="logo-default.svg" target="_blank">Clicca qui</a>

Il tag <img> mi visualizza l'immagine senza font se invece clicco il link (ed apro direttamente l'immagine) me lo visualizza...

A sto punto non credo sia un prolema di percorsi (essendo tutto nella stessa cartella)...

[KillerWorm]

A sto punto non credo sia un prolema di percorsi (essendo tutto nella stessa cartella)...

bene, almeno puoi escludere questa causa.

Potrebbe dipendere da qualche restrizione di sicurezza del browser che ne impedisce il caricamento.
Tu hai provato a testarlo su diversi browser?

Io non saprei dirti di più se non posso testare la pagina personalmente.
Ripeto: puoi postare un link di un esempio online?


Domanda: stai includendo il font solo per il logo? In tal caso non sarebbe più semplice convertirlo in vettoriale per ottenerne direttamente un svg, senza quindi richiamare risorse esterne?