Problema caricamento font personalizzato

[stefus85]

Salve a tutti,
ho un problema molto fastidioso sul sito che sto sviluppando. In particolare volendo utilizzare un font specifico senza linkarlo da google ma tenendo tutto in locale ho fatto in questo modo:

In templates/nometemplate/css/fonts ho creato una cartella con all'interno il font con estensioni:
.eot, .svg, .ttf, .woff

aggiungendo anche il file stylesheet.css con contenuto:

Codice: [Seleziona]

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 18, 2014 */
@font-face {
    font-family: 'psycho';
    src: url('psycho-webfont.eot');
    src: url('psycho-webfont.eot?#iefix') format('embedded-opentype'),
         url('psycho-webfont.woff') format('woff'),
         url('psycho-webfont.ttf') format('truetype'),
         url('psycho-webfont.svg#psycho_poetryregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Ho aggiunto in templates/nometemplate/css/template.css la stringa:

Codice: [Seleziona]

@import url(fonts/Psycho/stylesheet.css);

Dopodiché ho modificato tutti gli attributi font-family come di seguito:

Codice: [Seleziona]

font-family: Psycho,Arial,sans-serif;


Adesso il problema è che spesso il sito non carica il font Psycho ma un altro (credo Arial) scombinando così tutto il layout, anche quando la pagina è stata del tutto caricata. Poi aggiornando la pagina o cancellando la cache il problema può non ripresentarsi. Ed è proprio questo manifestarsi ad intermittenza del problema che mi confonde.
Succede con diverse versioni di sistema operativo, browser, piattaforma...

Aggiungo che quando il problema si manifesta, tramite firebug l'espressione

Codice: [Seleziona]

font-family: Psycho,Arial,sans-serif;
compare correttamente.

Qualcuno mi aveva suggerito di fare un preload del font ma non ho avuto altre spiegazioni.

Mi date una mano?

[stefus85]

Volevo aggiornare la situazione perché in firebug è vero che compare sempre l'espressione:

Codice: [Seleziona]

font-family: Psycho,Arial,sans-serif;

però quando il font è caricato correttamente la scritta Arial è in grigio chiaro mentre quando non carica il font è la scritta Psycho ad essere di quel colore.

[tomtomeight]

Per verificare che li carica dal sito e non dal tuo pc, dovresti provare con un pc ove non sia installato quel font.

[stefus85]

Grazie per la risposta.
Lo carica (quando lo carica) sicuramente dal sito.

Dal comportamento di firebug sembra quasi che non sempre scarichi il font dal server per poi ritrovarsi a caricarlo senza esserne in possesso.

Tra l'altro il preload del font credo risolverebbe solo il problema del layout scombinato prima del completo caricamento della pagina (e del font).

[giuliacss]

Prova a richiamare i vari font nella dichiarazione @font-face con percorso assoluto tipo

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

Facci sapere.

[stefus85]

Ciao ragazzi,
riprendo questo thread dopo tanto tempo.

Avevo accantonato il sito, ora finalmente l'ho ripreso dal punto in cui l'avevo lasciato, cioè questo problema.

Ho notato che il font non veniva caricato mai quando una qualunque pagina del sito veniva lanciata senza il "www." iniziale nella url. Cliccando poi in un collegamento interno, il browser aggiunge in automatico quel prefisso, utilizzando correttamente il font.

Quindi la questione si riduce a fare un redirect da nomesito.it a www.nomesito.it

Per farlo bisogna modificare il file .htaccess presente nella root del sito aggiungendo dopo la stringa

Codice: [Seleziona]

# redirects use the correct RewriteRule syntax and the [R=301,L] flags. il codice seguente:

Codice: [Seleziona]

RewriteCond %{HTTP_HOST} ^nomesito\.it [NC]
RewriteRule ^(.*) http://www.nomesito.it/$1 [R=301,L]
Ovviamente al posto di nomesito, scrivere l'effettivo nome del sito in questione.

Spero possa essere di aiuto a qualcuno e che il metodo non sia concettualmente sbagliato o peggio ancora dannoso in qualche modo, nel caso qualunque altro intervento è gradito.

Ciao a tutti!

[giusebos]

secondo me era tutta una questione di percorsi.