Member Avatar for PDB1982

I'm am trying to make sure that my webpage comes across conrrectly now that everything is stored on our schools servers, and everything checked out fine yesterday when I was using IE8. Now that I'm here, using IE7, the font face won't come across. These are stored in the server file with the address:

and

this is the code Iam using in my external CSS:

@font-face {
    font-family: "HARD_ROCK";
    src: url(HARD_ROCK.eot);
}
.rock {
    font-family: "HARD_ROCK";
    font-size: 80px;
    text-align: center;
}

@font-face {
    font-family: "Inked";
    src: url(inked.eot);
}
.ink {
    font-family: "Inked";
    font-size: 30px;
    text-align: center;
    color: black;
}

and respectively, my HTML code:

<p class="rock"> All About HTML WYSIWYG</p>

and


<address class="ink"> ....</address>

Any Ideas about what needs to change?

  • 2 Contributors
  • 2 Replies
  • 117 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by PDB1982

Dani AI

Generated

Short, practical checklist for getting @font-face to work in IE7 — expands on ’s points and addresses common gaps seen in cases like ’s.

IE6–8 only accept EOT. Use a proper web-converted EOT and the “bulletproof” @font-face pattern so IE actually picks it up; other browsers will use WOFF/TTF/SVG fallbacks. Relative URLs in CSS resolve relative to the CSS file, so confirm the path from the stylesheet to the font. Also verify the server is serving the font file (200) with the correct MIME type and that IE’s security settings aren’t blocking font downloads.

Example (bulletproof) @font-face pattern to use:

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

Troubleshooting steps and server fixes:

  • Point a browser at the font URL to confirm it downloads (no 404/403).
  • Check response headers; .eot should use application/vnd.ms-fontobject. For Apache add:
    
AddType application/vnd.ms-fontobject .eot

<IfModule mod_headers.c>
<FilesMatch ".(eot|ttf|otf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>


- Use Fiddler, curl, or the IE developer toolbar to watch requests.
- If fonts still fail in IE7, check Internet Options → Security → Custom Level → Downloads → Font Download (zone settings) and test with a freshly generated EOT (some TTF->EOT converters produce incompatible EOTs).

References for implementation and generators:
- MDN @font-face documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
- Font Squirrel webfont generator: https://www.fontsquirrel.com/tools/webfont-generator
- CSS Fonts spec: https://www.w3.org/TR/css-fonts-3/#font-face-rule

These steps cover the usual IE7 traps: wrong format, bad CSS declaration, server MIME/headers, or browser security blocking.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

If the computers do not have that font installed on them, they can't use it.

Font is local to the computer. The fact that YOU have the font when you write the page does not mean that the person viewing the page has that font installed on his computer.

Try to stick to the fonts that come with Windows.

The source file you give is a filename, but you are using it as a url. Where is this HARD_Rock.eot file stored? Your relative address says that it should be uploaded with the files onto the server. Is it?

Does the server you are using allow serving fonts?

Edited by MidiMagic because: n/a
Member Avatar for PDB1982

If the computers do not have that font installed on them, they can't use it.

Font is local to the computer. The fact that YOU have the font when you write the page does not mean that the person viewing the page has that font installed on his computer.

Try to stick to the fonts that come with Windows.

The source file you give is a filename, but you are using it as a url. Where is this HARD_Rock.eot file stored? Your relative address says that it should be uploaded with the files onto the server. Is it?

Does the server you are using allow serving fonts?

The html, css, and eot files are all stored within the same folder on the same folder. I was under the impression that I could use it this way, so that the user didn't have to have the font installed. Using a local file, would allow the browser to call the font as necessary....how else to people supply crazy fonts to their webpages through css?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.