@font-face experimenta (Cross-browser....)

[simulacron]

Non funziona il collegamento verso la pagina html5 (ecco perchè l'ho messo qui....) tra il font di@font-face e FF Ubuntu 10.10 (FF non legge o non trova il font scaricato, inaltri termini)
Dunque...Mettiamola così:
Ho deciso di fare qualche esperimento con @fontface....
Sono andato a Google fonts.. Ho scaricato qualche font e ho seguito le istruzioni. A posto.
Ho cercato di fare come pensavo di fare ma non funziona.
Ora vorrei sapere perchè...
Prendiamo un font a caso, il Cabaletta.

Ho tutto nell'archivio Web.
In

Web/Font/Cabaletta/documenti del font Cabaletta.

Qui ho messo i documenti del font Cabaletta come preparati da fontsquirrel nell'ara ad hoc .

Web/Css/Css3.css

è il css della pagina (in Html5)

Web/Css/Font3.css

è il css dei font dove ho messo, in una delle varie prove il foglio di stile costruito dal suddetto FontSquirrel per quel font.

Web/Html5/nome pagina

è il nome della pagina per gli esercizi.

Scusate la lunghezza...Ma sono bloccato.
Se dovete chiedere o spostare fate pure.

Ora se metto i dati del Cabaletta nel Font.css che importo in Css3.css o lo metto direttamente nl foglio di stile principale, non compare. compare solo il font prescelto nel caso ci siano dei problemi......

Perchè cosa ho sbagliato? Meglio, cosa avrei dovuto fare o scrivere?
Tenete presente che ho provato quasi tutti i collegamenti. Non funzionano.
Solo il collegamento alle GoogleApis funziona (è il suggerimento fornito da Google al momento di scaricare il font)
Edit: di qualche minuto dopo queste righe:
Come si fa a collegare il @font-face con quella pagina in modo che venga letta da FF?

[morocarlo]

quando dai il riferimento dal css questo parte da web/css, devi quindi usare una cosa del tipo ./Font ....

[simulacron]

Chiedo scusa a tutti. Mi ero completamente scordato di questo post....

Al momento, guardando quà e là nel web, guide e blog di html.it compresi ....
Ho trovato la seguente soluzione che sembra funzionare:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 1, 2012 */
/*
     Solo per IE
*/
@font-face {
    font-family:'28DaysLaterRegular';
    src:url('../Font/28DaysLater/28_days_later-webfont.eot');
    src:url('../Font/28DaysLater/28_days_later-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;

}
/*
     Per gli altri browser
*/
@font-face {
    font-family:'28DaysLaterRegular';
     src:local('28DaysLaterRegular'),url('../Font/28DaysLater/28_days_later-webfont.ttf') format('truetype'),
   url('../Font/28DaysLater/28_days_later-webfont.woff') format('woff'),
   url('../Font/28DaysLater/28_days_later-webfont.svg#28DaysLaterRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Questa è la parte dei font personalizzati e qui di seguito c'è la sua lettura e l'implementazione nella pagina html.

body{
     /* Setting the default text color, size, page background and a font stack: */
    font-family:'28DaysLaterRegular','Times New Roman', Helvetica,serif,Arial; 
    font-size:16px;
    line-height:1.5em;
    font-weight:Normal;
    font-style:Normal;
    color:#600;
    text-shadow:0 2px 1px  #A53C03;
    background-color:#F7CD71;
    margin:1em 2em;
}
/*
     ...... Resto del foglo di stile......
*/

Ho usato la soluzione dei tre fogli di stile (qui manca il css di reset....)per comodità mia.

Il risultato dei maneggiamenti lo si può tovare guardando, nel browser, cosa c'è di là di questo link.
Spero che il link funzioni....
Faccio ancora alcuni ritocchi e poi se funziona....Metto il risolto.

[morocarlo]

Piccolo consiglio, sono solo 300k di file .eot, senza contare gli altri e senza contare tutto quello che verrà incluso successivamente, la tua pagina potrebbe essere troppo pesante, fossi in te cercherei un font visivamente simile ma molto meno pesante!

[simulacron]

300K? 'Ussignur..... A questo non ho pensato.
Torno sul classico, mi cerco qualche font come mi hai consigliato.

Non ho tenuto conto del fattore peso. C'è già gente che si lamenta quando la pagina pesa 100K... Non oso pensare alle parolacce che mi arrivano con quel peso.

Grazie mille!!!!!

[morocarlo]

100k magari no, ma secondo me è meglio non superare il mega, ottimale sarebbe 500k (contando immagini, js, css e tutto il resto).
Nel web moderno 500k sono quasi lo standard

[simulacron]

Vedo cosa fare.....

[Enoa]

Fossi in te cercherei di capire qual'è il problema con i google fonts e cercherei di risolvere e ne sceglierei uno che sia abbastanza popolare, così da godere del fatto che:
- viene servito al browser attraverso i CDN di google, la banda la consumano loro ed è sicuramente più performante se non hai CDN tuoi
- se usi un font molto popolare, trovando un compromesso con le esigenze grafiche, hai buone probabilità che questo sia già presente nella cache del browser dell'utente che visita il tuo sito, che non lo deve scaricare di nuovo, ne guadagni in tempo di caricamento della pagina.

http://googlewebfonts.blogspot.com/2...tatistics.html
http://www.google.com/webfonts#ChoosePlace:select (Sorting: popularity)