There is an EOT font that appears fine on my computer, but it doesn't appear to work on my mother's computer (which is also running IE8).

The version of IE8 on my mother's computer is:

Version: 8.0.6001.18702

The Developer Tools CSS does not show the @font-face in it, and when I go to the CSS file to look at it directly, and type the URL into the address bar I can download the EOT file. I really don't understand why it is not working.

Location of CSS File: http://leeand00-pc/test-site/wp-content/themes/coffeeSunrise/screen.css

The line that specifies the font-face:

@font-face {
  font-family: "Bedini";
  src: local("?"), url('/test-site/wp-content/themes/coffeeSunrise/./fonts/bedini.ttf') format('truetype'), url('/test-site/wp-content/themes/coffeeSunrise/./fonts/bedini.eot') format('opentype');

Note that the site is running on a test server until I get the bugs worked out, and not on a live site.

1 answer


I'm guessing it's 'working' for you because you have the Bedini font installed on your machine, and the @font-face rule isn't doing anything on either browser. Also note, .eot isn't Open Type, that would be .otf.

Try putting the eot definition first, in its own src:

@font-face {
  font-family: "Bedini";
  src: url('/test-site/wp-content/themes/coffeeSunrise/./fonts/bedini.eot');
  src: local("?"), url('/test-site/wp-content/themes/coffeeSunrise/./fonts/bedini.ttf') format('truetype');

Or read Paul Irish's Bullet Proof @font-face Syntax

Answered over 8 years ago by Rob Crowther