Come si incorpora un font sito Web personalizzato in formato ttf per tutti i browser?

Question

Sul mio sito web sto usando un carattere personalizzato che ho caricato. Sembra che stia scegliendo quando lavorare a intermittenza. Funziona su alcuni computer/browser, ma non su altri. Inoltre è mappato correttamente.

Questo è il mio codice:

<style type="text/css"> 
@font-face { 
    font-family: 'AgencyFBRegular'; 
    src: url('agencyr.eot'); 
    src: url('agencyr.eot?#iefix') format('embedded-opentype'), 
     url('agencyr.woff') format('woff'), 
     url('AGENCYR.TTF') format('truetype'), 
     url('agencyr.svg#AgencyFBRegular') format('svg'); 
} 


h3 { font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%; 
    border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px; 
</style> 

ho pensato che stava lavorando in tutto il mondo fino a quando ho usato il computer portatile di un amico per vederlo.

Riesci a vedere dove sto andando male?

AGGIORNAMENTO: Ho aggiornato il carattere CSS. Sembra che funzioni, ma ora non su iOS.

Answer 1

È necessario modificare il nome del file del font senza maiuscole. Come questo: da AGENCYR.TTF a agencyr.ttf

e nel file css:

src: url('agencyr.ttf'); 

Answer 2

Il seguente codice dovrebbe funzionare:

@font-face { 
    font-family:"AgencyFBRegular"; 
    src: url("agencyr.eot") /* EOT file for IE */ 
} 
@font-face { 
    font-family:"AgencyFBRegular"; 
    src: url("agencyr.ttf") /* TTF file for CSS3 browsers */ 
} 

h3 { 
    font-family:'Agency FB', sans-serif; 
    font-size: 26px; 
    font-weight:normal; 
    text-align: left; 
    line-height: 100%; 
    border-bottom: 1px solid #484848; 
    padding-bottom: 5px; 
    margin-bottom:7px; 
}