embedded font on website won't display in IE or Chrome

Question

I have the following font setup in the CSS for a wordpress based site I'm building and the fonts display fine in FF, but not at all in IE(9) or Chrome(latest).

  /* =Typography
  -------------------------------------------------------------- */
  @font-face {
      font-family: 'Humanist';
      src: url('fonts/humanist521lightbt-webfont.eot');
      src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/humanist521lightbt-webfont.woff') format('woff'),
           url('fonts/Humanist521LightBT.ttf') format('truetype'),
           url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
      font-family: 'HumanistIT';
      src: url('fonts/humanist521lightitalicbt-webfont.eot');
      src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
           url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
           url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
     font-family: 'HumanistBo';
     src: url('fonts/humanist777blackbt-webfont.eot');
     src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/humanist777blackbt-webfont.woff') format('woff'),
     url('fonts/Humanist777BlackBT.ttf') format('truetype'),
     url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
     font-weight: normal;
     font-style: normal;
  }

When I need to use the font for an element, I just add font-family: 'Humanist', Arial, sans-serif;

The fonts are stored in the theme's directory in folder called "fonts".

Am I doing something wrong or missing something for it to work with other browsers?

Thanks

updated code. Now only have issues in Chrome – Reece May 15 '13 at 01:44 — Reece, May 15 '13 at 01:44

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

Internet Explorer 9 and less has some issues displaying .TTF files. It does not support embedded fonts via the CSS3 scheme without first converting into supported formats (.svg, .ttf, .eot, etc.). However, you can tweak your @Font-Face Syntax to support this.

With Chrome not displaying the correct font, this is due to different browsers having different needs. You can find more information in the second link in the more information below.

A side note as well: if your font is hosted on Google Fonts, embed a link into your website instead of hosting it yourself.

TLDR; need a comprehensive list of @font-face types

More information:

SO Question - IE problems with True Type Font files

SO Question - Font-Face problem in Chrome

Further Hardening of the Bulletproof Syntax - Fontspring.

Bulletproof @font-face syntax - Paul Irish

edited May 23 '17 at 10:25

Community

1
1

answered May 15 '13 at 01:34

eggy

2,836
3
23
37

Thanks I read another persons question and came across font squirrel. I've updated my code to include the converted fonts... There is still an issue with Chrome though. – Reece May 15 '13 at 01:41
Is it not displaying in Chrome still? Can I ask what fonts you are using (as in `.ttf`, `.svg`, `.eot`, etc)? – eggy May 15 '13 at 01:43
Fixed! I had to add the MIME type for woff to IIS – Reece May 15 '13 at 01:51
@ReeceDodds I was about to say had you seen [this question!](http://stackoverflow.com/questions/2871655/proper-mime-type-for-fonts/4657091#4657091) Heh, good to hear :). – eggy May 15 '13 at 01:52

score 0 · Answer 2 · edited Jan 06 '14 at 20:47

To use the font for an HTML element, then we need to use the @font-face rule of power full features of CSS3 that supported in many modern browser. CSS property font-family of HTML is used to defined the font name which we want to embed ans src property used to defined the path of the font to be embed.

@font-face
{
    font-family: myfont;
    src: url('(fontfile.eot') format('embedded-opentype'),
            url('(fontfile.woff') format('woff'),
         url('(fontfile.ttf') format('truetype'),
         url('(fontfile.svg#(fontfile') format('svg');
}

div,h2
{
    font-family:myfont;
}

embedded font on website won't display in IE or Chrome

2 Answers2