Letter spacing and/or kerning issues using a font-face in Chrome (OK) and Firefox (not OK). Font is Gotham. Live with it or...?
Jun 13, 2012
from
Francesco Fullone
and
Frederic
liked this
Usando anche un reset CSS, la stessa scritta con lo stesso font appare diversamente (sia su Ubuntu che su OSX). La diversità è tutta nello spazio tra una lettera e un'altra (maggiore in Firefox). Non capisco se il problema possa essere il font sfigato o proprio il sistema di rendering...
- Claudio Cicali
(ovviamente letter-spacing è useless)
- Claudio Cicali
Bak, anche a me era balenata l'idea del problema di conversione... // flod, vedo se posso al volo
- Claudio Cicali
bak: http://fontforge.sourceforge.net/ (Non ci provo io perché so disegnare giusto aste e pallini, come noto...)
- Marco d'Itri
Claudio, che font-size è il testo in gotham? Sotto i 20px il kerning deve essere attivato a manina.
- Matteo Balocco
Ovviamente hai già impostato il "text-rendering: optimizeLegibility;"
- Matteo Balocco
Ecco il caso minimo (non troppo) http://lab.web20.it/tmp/ guardatelo con i due browser (sì, è una pagina 404) // Matteo, no. Ora provo
- Claudio Cicali
Così a occhio mi sembra che per qualche ragione non carichi le curve giuste o le duplichi (però è strano perché ho visto questo fenomeno solo su IOS vecchi con font svg.)
- Matteo Balocco
Ehi, ma aspetta un po'... gli dici di caricare il woff e il file non c'è... Magari va a trote sul caricamento di fallback
- Matteo Balocco
Matteo, ho aggiunto anche il woff, senza troppo successo... :( Che usate per convertire font? Io ho usato font2web.com (In fontsquirrel Gotham è in blacklist)
- Claudio Cicali
fontforge, quando fontsquirrel restituisce blacklist
- Matteo Balocco
Grazie, ora provo. Ho notato che potrei sistemare usando letter-spacing negativi... Peccato non poter usare -moz-letter-spacing
- Claudio Cicali
Ma il problema a mio avviso non è mica di kerning/tracking. È di rendering del font. Su FF ha un effetto di duplicazione sfalsato sull'asse orizzontale.
- Matteo Balocco
flod, in effetti il problema è quello. Se non specifico "font-weight: bold" nel #message, il rendering è uguale. Se aggiungo bold, va tutto a puttane.
- Claudio Cicali
flod, sì quelle le ho tolte. [edit: no, ce l'ho rimesse: http://paulirish.com/2010...]
- Claudio Cicali
se sballa col bold forse il tuo font non ce l'ha e se lo inventa il browser, quindi non sarebbe strano che diano risultati diversi.
- michele
http://sht.tl/rp8oi mi sono convertito il Gotham e a me non da grossi problemi
- Matteo Balocco
michele, non ce l'ha. E' un font bold di suo, ma non a sufficienza :)
- Claudio Cicali
Claudio, perdona la sintesi e il fatto che non ho scoppolato tutto il mo'bulletproof... tanto il test serve soprattutto per il woff
- Matteo Balocco
Matteo, ho provato ma... boh... non mi cambia nulla. Ormai ci rinuncio e vorrà dire che useremo un font meno carico (o una png).
- Claudio Cicali
Curiosità mia. Hai cambiato anche il Woff con il mio e usato la dichiarazione del bold nell'@font-face e non nel selettore?
- Matteo Balocco
Matteo, sì. Ho usato il tuo woff e provato mettere / togliere il bold. Comunque, dai, questione chiusa: quel font non possiamo usarlo legalmente.
- Claudio Cicali
Yep
- Matteo Balocco
dobbiamo aspettare che H&FJ lanci i webfont, lo hanno annunciato da più di un anno
- sid
Bak, è come dice Sid. Quel font non si può usare come @font-face :(
- Claudio Cicali
L'avevano annunciato, ero presente di persona, all'AmpersandConf2011. Banfoni. Se lo meriterebbero, un uso proletario...
- Matteo Balocco