Jak osadzić niestandardową czcionkę witryny w formacie ttf dla wszystkich przeglądarek?

Question

Na mojej stronie używam niestandardowej czcionki, którą przesłałem. Wydaje się, że wybieram, kiedy pracować z przerwami. Działa na niektórych komputerach/przeglądarkach, ale nie na innych. Jest również poprawnie odwzorowany.

To jest mój kod:

<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> 

myślałem, że to działa wszędzie, aż kiedyś laptopa znajomego, żeby go zobaczyć.

Czy widzisz, gdzie idę źle?

UPDATE: I zostały zaktualizowane CSS czcionki. Wygląda na to, że działa, ale teraz nie na iOS.

Answer 1

Potrzebujesz zmienić nazwę pliku czcionki bez wielkich liter. Tak: od AGENCYR.TTF do agencyr.ttf

i w pliku CSS:

src: url('agencyr.ttf'); 

Answer 2

Poniższy kod powinien działać:

@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; 
}