internet explorer cambia carattere (font) impostato con safari

[andmicci]

Salve a tutti,
come da titolo, ho impostato un nuovo carattere per il sito www.emanuelab.it utilizzando un iMAC e SAFARI. Il carattere e' "Century Gothic" e se visualizzo il sito dall' iMac o dal telefonino (iPhone) tutto va a meraviglia. Acedendo al sito da un PC con Internet Explorer la cosa cambia, cioe' sembra che il carattere sia tutto raggrinzito e spiegazzato, non e' tondeggiante e linerare come dovrebbe.
 
Qualche consiglio?
 
Grazie in anticipo

[Fabrizio Fiorita]

Ciao.
Probabilmente il tuo IE non ha quel carattere fra i suoi fonts  quindi cerca di sostituirlo con un altro.
Io sostituirei più volentieri IE, che dà un sacco di grane con la visualizzazione dei siti. Ma se proprio vuoi puoi inserire il font che desideri nella cartella del template, in due versioni però: quella .eot per IE e quella .ttf per il resto dell'universo. Poi dovrai caricare i due fonts nel primo foglio di stile con la regola @font-face .

[andmicci]

Grazie per la risposta intanto
Poi volevo chiederti se aggiungendo come dici il font nel css con la regola @font-face risolvo anche nel caso in cui un utente che non abbia quel font sul proprio browser si colleghi al mio sito.
Cioé tutti lo vedono in modo corretto indipendentemente dal browser utilizzato?
Grazie

[Fabrizio Fiorita]

Certamente, basta che i due fonts .eot e .ttf stiano in una cartella fonts nella cartella del template.
Se vai a vedere il mio sito (qui sotto nella firma) vedrai che gli articoli di prima pagina iniziano con una lettera speciale: il relativo font sta dove io ti ho detto di mettere i tuoi.

[Npaquito]

...Se vai a vedere il mio sito (qui sotto nella firma)...

Hola

Complimenti, ha un mucchio di soluzioni interessanti

[andmicci]

PERO'...
io ho potuto attivare il mio font dal back end del mio template chiamato "yougrids" perché in un altro forum (joomla) mi avevano detto non serviva inserire il font in quanto potevo farlo da li... a questo punto mi chiedo se il prezioso suggerimento di Fabrizio Fiorita sia utile ad inserire un font in quanto assente nel template o anche a far si che il font utilizzato sia ben visibile su tutti i browser...non vorrei aver creato un malinteso...


grazie

[Fabrizio Fiorita]

Chiariamo.
Se tu hai la certezza che il font che utilizzi nell'espressione font-family sia disponibile in TUTTI I COMPUTERS dai quali guardano il tuo sito, puoi evitare di caricare i fonts nella cartella del template. L'utilizzo normale dei fonts è dato dai valori "serif", "sans-serif", "cursive", fantasy" e "monospace", ai quali ciascun browser assegna il corrispondente font disponibile nel sistema operativo in uso.
Solitamente sono disponibili Times New Roman (serif), Arial o Helvetica (sans-serif), e per gli altri valori ogni OS fa per sé.
Quindi, se si vuole un carattere specifico costante sempre e dovunque, è opportuno mettere i fonts nella cartella, altrimenti è inutile lamentarsi dell'ambiguità dei vari browsers ed OS.

[andmicci]

ottimo....chiaro e conciso!


adesso ti chiedo un ultimo aiutino se puoi, cioè' indicarmi (anche più' o meno) in quale cartella inserire il font e se si tratta di modificare una sola cartella o più' di una.


grazie

[Fabrizio Fiorita]

Creare cartella fonts nella cartella del template e copiarci dentro i files nomefonte.eot e nomefonte.ttf.
Nel primo foglio css richiamato dal sito inserire all'inizio la regola:

@font-face {
font-family: 'nomefont';
src: url('fonts/nomefont.eot');
src: local('nomefont') url('fonts/nomefont.ttf');
 }

La funzione local(), ignorata da IE, serve ad evitare che IE dia errore nel caricare la seconda url.

[Carlito10]

Ciao Fabrizio scusa l'ignoranza ma non sono molto espero di css, volevo sapere se mi potevi aiutare: ho inserito il @font-face all'inizio del file template.css ho inserito la cartella fonts con il font che mi serve in ttf e in eot nella cartella del mio template, ma non succede niente vedo sempre un fon non corretto su altri computer...
Ti ringrazio in anticipo

[Fabrizio Fiorita]

T

Ciao Fabrizio scusa l'ignoranza ma non sono molto espero di css, volevo sapere se mi potevi aiutare: ho inserito il @font-face all'inizio del file template.css ho inserito la cartella fonts con il font che mi serve in ttf e in eot nella cartella del mio template, ma non succede niente vedo sempre un fon non corretto su altri computer...

Ti sei ricordato di assegnare il font-face agli elementi che lo devono utilizzare?
ad es.:

p          {
             font-family: 'nomefont';
             ...............................
             }

[Carlito10]

eh mi sa che è proprio questo il problema capendoci poco e niente di css non so dove inserirlo, premetto che ho creato il tempalte con Art....... e già li ho inserito il font, è mi serve praticamente ovunque ho usato solo quel font sia per i testi sia per i titoli in tutte le posizioni, ti copio il pezzo iniziale del template.css dove ho inserito il @fontface cosi forse riesci a capire meglio dove sbaglio:
grazie ancora...

@font-face {
font-family: 'GeosansLight';
src: url('fonts/GeosansLight.eot');
src: local('GeosansLight') url('fonts/GeosansLight.ttf');
}

#art-main, table
{
   font-family: GeosansLight,Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
   margin: 0;
   padding: 0;
}

.art-postcontent,
.art-postheadericons,
.art-postfootericons,
.art-blockcontent-body,
ul.art-vmenu a
{
   text-align: left;
}

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
   font-family: GeosansLight,Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   font-size: 16px;
   text-decoration: none;
   text-transform: none;
}

.art-postcontent p
{
   margin: 12px 0;
}

.art-postcontent h1, .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:visited, .art-postcontent h1 a:hover,
.art-postcontent h2, .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:visited, .art-postcontent h2 a:hover,
.art-postcontent h3, .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:visited, .art-postcontent h3 a:hover,
.art-postcontent h4, .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:visited, .art-postcontent h4 a:hover,
.art-postcontent h5, .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:visited, .art-postcontent h5 a:hover,
.art-postcontent h6, .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:visited, .art-postcontent h6 a:hover,
.art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover,
.art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover,
.art-logo-name, .art-logo-name a, .art-logo-name a:link, .art-logo-name a:visited, .art-logo-name a:hover,
.art-logo-text, .art-logo-text a, .art-logo-text a:link, .art-logo-text a:visited, .art-logo-text a:hover,
.art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover
{
   font-family: GeosansLight,Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: bold;
   font-size: 22px;
   text-decoration: none;
}

.art-postcontent a
{
   color: #FFFFFF;

etc, etc

[Fabrizio Fiorita]

Il nome dei font caricati va messo tra apici: 'nomefont'

Ho letto nel tuo css una pseudoclasse :hovered
Errore di stampa?

Per il resto, dal solo foglio di stile non posso valutare la coerenza o la correttezza.

[Carlito10]

come avrai capito il font che mi serve e il Geosan......... mi serve solo questo gli altri che compaiono me li ha inseriti lui di di default credo, quindi devo inserirlo tra apici sempre, non solo nel font-face?
cosa ti serve per capire dove sbaglio? non riesco proprio a risolverolo sto problema sicuramente sarà una cretinata ma mi sono bloccato

[Fabrizio Fiorita]

I nomi esterni vanno sempre inseriti tra apici.
Poi, quando per un selettore indichi più font-family, tipo
   font-family: GeosansLight,Arial, Helvetica, Sans-Serif;
il browser sceglie il più rapido fra quelli indicati.
se invece scrivi
   font-family: 'GeosansLight';
deve caricare quello che dici tu.

[Carlito10]

ninete da fare.... questa e la prima parte del template.css:
credo di aver fatto tutto giusto ho fatto anche varie prove ma non va
grazie cmq per la disponoibilità

@font-face {
    font-family: 'GeosansLight';
    src: url('fonts/GeosansLight.eot');
    src: local('GeosansLight') url('fonts/GeosansLight.ttf');
}

#art-main, table
{
   font-family: 'GeosansLight';
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
   margin: 0;
   padding: 0;
}

.art-postcontent,
.art-postheadericons,
.art-postfootericons,
.art-blockcontent-body,
ul.art-vmenu a
{
   text-align: left;
}

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
   font-family: 'GeosansLight';
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   font-size: 16px;
   text-decoration: none;
   text-transform: none;
}

.art-postcontent p
{
   margin: 12px 0;
}

[Murphz]

http://www.fontsquirrel.com/fontface/generator


Utilizza fontsquirrel, carichi il font..ti prendi il codice, metti i font nella stessa cartella dove c'è il file css, dentro una cartella chiamata fonts e hai finito.

[Carlito10]

ciao avevo provato anche cosi.... ma niente, ho fatto la cartella fonts nella cartella dei css ho messo dentro i font che mi ha generato ho preso il codice dal file stylesheet.css e l'ho incollato nel file template.css ma cmq su l'altro computer non lo vedo...

@font-face {
    font-family: 'GeosansLightRegular';
    src: url('geosanslight-webfont.eot');
    src: url('geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
         url('geosanslight-webfont.woff') format('woff'),
         url('geosanslight-webfont.ttf') format('truetype'),
         url('geosanslight-webfont.svg#GeosansLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#art-main, table
{
   font-family: 'GeosansLight';
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
   margin: 0;
   padding: 0;
}

.art-postcontent,
.art-postheadericons,
.art-postfootericons,
.art-blockcontent-body,
ul.art-vmenu a
{
   text-align: left;
}

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
   font-family: 'GeosansLight';
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   font-size: 16px;
   text-decoration: none;
   text-transform: none;
}

.art-postcontent p
{
   margin: 12px 0;

[Murphz]

ciao avevo provato anche cosi.... ma niente, ho fatto la cartella fonts nella cartella dei css ho messo dentro i font che mi ha generato ho preso il codice dal file stylesheet.css e l'ho incollato nel file template.css ma cmq su l'altro computer non lo vedo...

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

Da quel che vedo i font non vengono richiamati dalla cartella font/, sai te dove li hai messi insomma. Altra cosa, utilizza sempre il font-family come è scritto sulla direttiva font-face....li hai GeoSansLightRegular, negli altri hai GeoSansLight.

[Carlito10]

provato.. niente anzi cosi me la cambia anche sul mio computer, non è che sbaglio a posizionarlo...?

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

}

art-main, table
{
   font-family: 'GeosansLightRegular';
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
   margin: 0;
   padding: 0;
}

.art-postcontent,
.art-postheadericons,
.art-postfootericons,
.art-blockcontent-body,
ul.art-vmenu a
{
   text-align: left;
}

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
   font-family: 'GeosansLightRegular';
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   font-size: 16px;
   text-decoration: none;
   text-transform: none;
}

.art-postcontent p
{
   margin: 12px 0;

[Murphz]

Io avevo fatto così e funziona senza problemi, magari sbagli a posizionarlo si.


ps: davanti il @font-face hai messo un #, solo per farti sapere eh 

[Carlito10]

ok grazie.... ci sono riuscito, adesso il testo me lo vede giusto... mi manca solo il topmenu ma presumo che mi basti trovarlo nel css e inserirci anche li il codice del fontface...
grazie ancora

[Fabrizio Fiorita]

Primo: togli il cancelletto

#@font-face {   diventa    @font-face {


Secondo: inserisci questa regola all'inizio, subito dopo font-face:

*, html, body
                     {
                     font-family: 'GeosansLightRegular';
                     font-style: normal;
                     font-weight: normal;
                     font-size: 13px;
                     }

Terzo: controlla che i vari files di fonts stiano dentro la cartella fonts, che deve stare nella cartella del template.

[Carlito10]

Perfetto... grazie mille