How do I embed a custom website font in ttf format for all browsers?

Question

On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.

This is my code:

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

I thought it was working everywhere until I used a friend's laptop to view it.

Can you see where I'm going wrong?

UPDATE: I have updated font CSS. It seems to be working, but now not on iOS.

Answer 1

The following code should work:

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