8

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-family: 'xyzfont';
src: url('fonts/abc-font.eot?') format('eot'), 
     url('fonts/abc-font.woff') format('woff'), 
     url('fonts/abc-font.ttf') format('truetype');
}

h1, h2, h3, div span { font-family: 'xyzfont', Georgia, Arial; }

Any suggestion to make it more compatible (such as IE7) most welcome.

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
Deepak Rajpal
  • 811
  • 1
  • 8
  • 11

2 Answers2

19

Here is the css i use to embed my font in every browser, hope that helps:

@font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot'); /* IE9 Compat Modes */
src: url('fonts/abc-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/abc-font.woff') format('woff'), /* Modern Browsers */
     url('fonts/abc-font.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/abc-font.svg#svgFontName') format('svg') /* Legacy iOS */
}

Also note, that you can set your font family without quote, like this:

h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }

You can learn about font browser support here.

fontsquirrel is probably the best place to generate every font format you need.

This article explain how to find your font ID to add after the hashtag for the SVG font.

If someone is asking why is there ?#iefix for IE6-IE8 browsers eot font, see this answer.

service-paradis
  • 3,333
  • 4
  • 34
  • 43
  • thanks morgul, working well in IE-7/8. Even my code also seems to working fine ;) many thanks anyway – Deepak Rajpal Sep 18 '13 at 15:17
  • This is the only correct answer to be given to this question, works like a charm! :) – Abbas Jul 15 '14 at 19:52
  • Wow, fontsquirrel.com is spectacular! Pretty much a web fonts silver bullet. I grabbed a .ttf file from Windows for a font I liked, uploaded it, and it did all the work for me. Very nice. Even gives you direction on dealing with IIS MIME type issues with .svg fonts. – Jacob Stamm Aug 04 '16 at 14:12
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 )

farshidpg
  • 49
  • 9
  • 2
    The site you linked seems to have a history of spamming here. Is it an integral part of your answer? If not, I'd suggest not including a link to it. – Nic Mar 30 '17 at 18:20