0

I'm attempting a custom font and have utilized everything I know of (including ?#iefix) and it's working great on every browser except IE8 and IE7. I simplified it down to bare bones and still see the issue.

Here's a link to the live version of the test

This is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>This is a test.</h1>
</body>
</html>

CSS Here:

@charset "utf-8";
/* CSS Document */

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

h1 {
    font-family: 'swz721kc';
    font-size: 42px;
    color: #000;
    font-weight: normal;
    margin: 30px 0 0 0;
    padding: 0;
}

2 Answers 2

0

Try this:

@font-face {
  font-family: 'swz721kc';
  font-style: normal;
  font-weight: 400;
  src: url(/compass-learning/test/fonts/swz721kc.eot);
  src: local('swz721kc'),
    url(/compass-learning/test/fonts/swz721kc.ttf) format('truetype');
}

This is the format I have used to embed our fonts and have them work across browsers.

1
  • @cathius - Did you make sure to push the reload button on your IE browser environment so that the stylesheet was reloaded?
    – Aiias
    Jun 24, 2013 at 18:17
0

try this:

@font-face {

font-family: 'swz721kc';
src: url('/fonts/swz721kc.eot');
src: url('/fonts/swz721kc.eot?#iefix') format('embedded-opentype'),
     url('/fonts/swz721kc.woff') format('woff'),
     url('/fonts/swz721kc.ttf') format('truetype'),
     url('/fonts/swz721kc.svg#swz721kc') format('svg');
font-weight: normal;
font-style: normal;

}

"/" is added before "fonts".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.