Font personalizzato in IE 8

[Messere]

Ciao a tutti. Ho un problema con il font del mio sito www.dmengineering.net . Il font è personalizzato e non fa parte di Google Font. Ho inserito le righe di comando nel template.css, ed ho notato questo:
- sul mio pc (W7 PRO SP1 64bit), dove il font in questione è anche installato, visualizzo il sito correttamente sia con IE 10.0.9200.16721, sia con FF 24.0, sia con Chrome 30.0.1599.101m, mentre visualizzo il font predefinito, non corretto, sia emulando IE 8 con IETester, che con IE 8.0.7600.16385;
- un altro pc testato (Windows XP SP3 32 bit), senza il font installato, visualizza il sito correttamente, con il font personalizzato, con Opera 17.0.1241.53, con Safari 5.1.7(7534.57.2), con Chrome 31.0.1650.48m e con FF 25.0, mentre visualizza il font standard, non corretto, con IE 8.0.6001.18702.
Sembra, quindi, che si tratti di una questione di browser: IE 8 non riesce a gestire il font personalizzato.
Qualcuno sa darmi una mano?
P.S. è il primo sito che faccio...si accettano consigli, e, soprattutto, critiche costruttive
Grazie mille.

[Messere]

Ciao a tutti. Ho un problema con il font del mio sito www.dmengineering.net . Il font è personalizzato e non fa parte di Google Font. Ho inserito le righe di comando nel template.css, ed ho notato questo:
- sul mio pc (W7 PRO SP1 64bit), dove il font in questione è anche installato, visualizzo il sito correttamente sia con IE 10.0.9200.16721, sia con FF 24.0, sia con Chrome 30.0.1599.101m, mentre visualizzo il font predefinito, non corretto, sia emulando IE 8 con IETester, che con IE 8.0.7600.16385;
- un altro pc testato (Windows XP SP3 32 bit), senza il font installato, visualizza il sito correttamente, con il font personalizzato, con Opera 17.0.1241.53, con Safari 5.1.7(7534.57.2), con Chrome 31.0.1650.48m e con FF 25.0, mentre visualizza il font standard, non corretto, con IE 8.0.6001.18702.
Sembra, quindi, che si tratti di una questione di browser: IE 8 non riesce a gestire il font personalizzato.
Qualcuno sa darmi una mano?
P.S. è il primo sito che faccio...si accettano consigli, e, soprattutto, critiche costruttive
Grazie mille.

Nessuno in mio soccorso?! 

[giusebos]

sbagli approccio,
fai una ricerca su google sulla realizzazione di font e come creare le varianti che servono ai vari browser.

[xplosion]

Hai letto l'articolo Come incorporare un font specifico su un sito Joomla! ?

[Messere]

Ciao: non l'avevo letto e ti ringrazio per la segnalazione, anche se avevo letto di tutto ed ho fatto mille prove. Comunque ho applicato alla lettera quanto descritto, ma rimane il problema: tutto ok con le ultime versioni di Opera, Safari, Chrome, Firefox, ed anche con Explorer 9 e 10, mentre il mio font personalizzato non viene visualizzato da Explorer 8 e precedenti.
Ho messo all'inizio (prima di ogni altra cosa) del mio file css questo:



@font-face {
   font-family: 'hemi_head_bd_it';
   src: url('../fonts/hemi_head_bd_it-webfont.eot');
   src: url('../fonts/hemi_head_bd_it-webfont.eot') format('embedded-opentype'),
   url('../fonts/hemi_head_bd_it-webfont.woff') format('woff'),
   url('../fonts/hemi_head_bd_it-webfont.ttf') format('truetype'),
   url('../fonts/hemi_head_bd_it-webfont.svg#hemi_head_bd_it') format('svg');}
   
 h2{
   font: 24px/27px 'hemi_head_bd_it', Arial, sans-serif!important;}


Poi, lungo il file, ogni volta che compare il richiamo alla font-family (più di venti volte), il comando è questo:


font-family: 'hemi_head_bd_it';


Ho provato anche senza apici, ma il risultato è lo stesso.


Dove sbaglio?


Grazie mille

[xplosion]

Un link al sito ?

[Messere]

Certo. www.dmengineering.net

[xplosion]

@font-face {
   font-family: 'hemi_head_bd_it';
   src: url('../fonts/hemi_head_bd_it-webfont.eot');
   src: url('../fonts/hemi_head_bd_it-webfont.eot') format('embedded-opentype'),
   url('../fonts/hemi_head_bd_it-webfont.woff') format('woff'),
   url('../fonts/hemi_head_bd_it-webfont.ttf') format('truetype'),
   url('../fonts/hemi_head_bd_it-webfont.svg#hemi_head_bd_it') format('svg');}

Dove sbaglio?

Mi sa che qualcosa è sbagliato... Che c'è con quel finale -webfont ?
Prova così:

Codice: [Seleziona]

@font-face {
   font-family: 'hemi_head_bd_it';
   src: url('../fonts/hemi_head_bd_it.eot');
   src: url('../fonts/hemi_head_bd_it.eot') format('embedded-opentype'),
   url('../fonts/hemi_head_bd_it.woff') format('woff'),
   url('../fonts/hemi_head_bd_it.ttf') format('truetype'),
   url('../fonts/hemi_head_bd_it.svg#hemi_head_bd_it') format('svg');}

[Messere]

sbagli approccio,
fai una ricerca su google sulla realizzazione di font e come creare le varianti che servono ai vari browser.

Ti assicuro che in pratica due giorni non ho fatto altro: ho fatto mille prove e, non risolvendo, ho provato a chiedere qui, dove di certo c'è gente molto più esperta di me.
Comunque grazie per il consiglio.

[giusebos]

prego!

Explosion ti ha dato la soluzione, inutile replicare adesso visto che ancora hai qualche problema.
Io non saprei cosa aggiungere se non: "il font è sicuro che funzioni?", hai rifatto un prova per vedere se il font viene scaricato?

[Messere]

Mi sa che qualcosa è sbagliato... Che c'è con quel finale -webfont ?
Prova così:

Codice: [Seleziona]

@font-face {
   font-family: 'hemi_head_bd_it';
   src: url('../fonts/hemi_head_bd_it.eot');
   src: url('../fonts/hemi_head_bd_it.eot') format('embedded-opentype'),
   url('../fonts/hemi_head_bd_it.woff') format('woff'),
   url('../fonts/hemi_head_bd_it.ttf') format('truetype'),
   url('../fonts/hemi_head_bd_it.svg#hemi_head_bd_it') format('svg');}

Ho aggiunto quel suffisso ai nomi dei file per distinguerli dal font-family: dici che potrebbe essere quello il problema? Ovviamente se elimino -webfont devo anche rinominare i 4 file che richiamo nel codice, giusto?
Comunque ti faccio sapere: intanto grazie.

[xplosion]

Ho aggiunto quel suffisso ai nomi dei file per distinguerli dal font-family: dici che potrebbe essere quello il problema? Ovviamente se elimino -webfont devo anche rinominare i 4 file che richiamo nel codice, giusto?
Comunque ti faccio sapere: intanto grazie.

Ti suggerisco di rileggere l'articolo con molta attenzione !

[Messere]

Mi sono riletto l'articolo.
I 4 file nella cartella fonts (sotto template) sono:
hemi_head_bd_it.eot;
hemi_head_bd_it.woff;
hemi_head_bd_it.ttf;
hemi_head_bd_it.svg;
 
Il mio css inizia così:
 

Codice: [Seleziona]


 
@font-face {
   font-family: 'hemi_head_bd_it';
   src: url('../fonts/hemi_head_bd_it.eot');
   src: url('../fonts/hemi_head_bd_it.eot') format('embedded-opentype'),
   url('../fonts/hemi_head_bd_it.woff') format('woff'),
   url('../fonts/hemi_head_bd_it.ttf') format('truetype'),
   url('../fonts/hemi_head_bd_it.svg#hemi_head_bd_it') format('svg');}
 
h2{
   font: 24px/27px 'hemi_head_bd_it', Arial, sans-serif!important;}


Poi, lungo il file, ogni volta che compare il richiamo alla font-family, il comando è questo:


font-family: 'hemi_head_bd_it';
 
Il risultato è lo stesso:ok con Safari, Chrome, IE 10, IE 9, Opera, Firefox, ma non con IE 8 e precedenti.
 
Se mi perdo qualcosa, non capisco cosa.

[xplosion]

Strano, se il percorso e giusto dovrebbe visualizzare il font giusto, ho provato anch'io con una versione di IE 8. Magari prova ad aggiungere un !important nel CSS.

[Messere]

Infatti strano che funzioni con tutto meno che con IE 8 e precedenti: quando dici di aggiungere !important, dato che sono un principiante assoluto con i css, dove intendi? Io l'ho messo solo nella riga inerente gli h2, proprio sotto il comando font-face: ho insomma seguito alla lettera l'articolo dato che non ho la perizia per inventarmi nulla in tal campo.
Grazie per le dritte.

[xplosion]

Prova un'ultima cosa, al posto di:

Codice: [Seleziona]

h2{
   font: 24px/27px 'hemi_head_bd_it', Arial, sans-serif!important;}
sostituisci con:

Codice: [Seleziona]

#content-w2 h2{
   font-family: 'hemi_head_bd_it', Arial,sans-serif!important;
   font-size:24px;
   line-height:27px;}

[Messere]

Provato, ma nulla: rimane la stessa situazione. Tutti i browser ok, meno IE 8.
Comunque grazie perchè stai spendendo del tempo sul mio problema.

[xplosion]

Non so come altro aiutarti... Per la cronaca sto proprio adesso costruendo un sito con un font personalizzato e si vede bene e uguale anche con IE8 !

Inoltre ho visto che hai nel head questo riferimento:

Codice: [Seleziona]

<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />Che e ?

[Messere]

Ma guarda che ne sono convinto che quel che stai facendo funziona: sarà una stupidata che mi sta facendo impazzire....tutto sta a capire cosa...
Il codice che mi riporti non ho idea cosa sia: di certo nulla che ho messo io.
Io non so che fare...ti mando il css...non so..dimmi te...Alla fine mi arrendo e aspetto che tutto il mondo abbandoni IE 8, ma il problema è che sono uno che non ama arrendersi 

[xplosion]

Non faccio niente con solo i CSS, ci saranno un sacco di file e poi bisogna valutarli insieme al sito, di controllare se magari c'è qualche altro conflitto non solo di CSS, insomma devi approfondire te