What is the best way to include custom font using CSS to make it compatible with maximum browsers?

Question

I have tried various codes to embed custom font and finally following seems to work in FF & IE8 above. But it does not support in IE7.

@font-face {
font-         


        

Answer 1

i use this code ;)

@font-face {
  font-family: 'BBadr';
    src: url('fonts/BBadr/BBadr.eot'); /* IE9 Compat Modes */
    src: url('fonts/BBadr/BBadr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url("fonts/BBadr/BBadr.otf") format("opentype"), /* Open Type Font */
      url('fonts/BBadr/BBadr.woff') format('woff'),/* Pretty Modern Browsers */
      url('fonts/BBadr/BBadr.woff2') format('woff2'), /* Super Modern Browsers */
      url('fonts/BBadr/BBadr.ttf')  format('truetype'),/* Safari, Android, iOS */
      url('fonts/BBadr/BBadr.svg#BBadr') format('svg'); /* Legacy iOS */
}

you can convert Online youre font ( ttf ( with this website : Simple Online Web Font Converter: ttf otf woff woff2 eot svg otf with css stylesheet

Convert font and use my css code ( not use the sample css of site )