• 0

@font-face not loading in IE (WordPress)


Question

If you go to the main website, the @font-face is working fine on all browsers but when I go into the blog which is WordPress then my @font-face does not work in IE but works in Chrome and Firefox. Does anyone know why it does not work?

http://romabio.com/ <--- Main Site

http://romabio.com/newsstand/ <--- Blog WordPress


<div class="post">

<div class="datebg">
<div class="month"><?php the_time('M'); ?></div><div class="day"><?php the_time('d'); ?></div>
<img src="https://www.romabio.com/newsstand/wp-content/themes/RomaUSA/images/blog-date.png" alt="" title="" />
</div>

<div class="preview-image">
<em><?php the_post_thumbnail( array(620,295) ); ?></em>
<p>If you see this message then the image didn't load or was not found. <br />
Content the webmaster to fix the problem. <a href="mailto:[email protected]">[email protected]</a></p>
</div>

<h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>

<div class="entry">
<?php the_content('Continue Reading ↑'); ?>
</div>
</div>
[/CODE]

[CODE]






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

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

[/CODE]

7 answers to this question

Recommended Posts

  • 0

Hmm, annoyingly I had the same problem but cannot think what it was!

Did you use font squirrel? If so literally copy everything they did for the CSS, evne the /* Gener...................

See if the problem still happens

I use the font squirrel gen code. I try to use a direct link to the font but then Firefox does not work. This is driving me crazy. It works if I use the CV in IE but I don't want it to do that. NON WordPress works fine. I'm testing it on IE10.

  • 0

I use the font squirrel gen code. I try to use a direct link to the font but then Firefox does not work. This is driving me crazy. It works if I use the CV in IE but I don't want it to do that. NON WordPress works fine. I'm testing it on IE10.

This is annoying me, as well. What do you mean by CV?

I'm thinking there's something wrong with the font file itself.

  • 0

This is annoying me, as well. What do you mean by CV?

I'm thinking there's something wrong with the font file itself.

Compatibility View

  • 0

Ah, for what it's worth, it doesn't work in IE8. Also the left column drops too low.

See here for some suggestions to try: http://stackoverflow.com/questions/12449512/why-does-one-of-these-font-face-render-in-ie8-but-the-others-dont/12459447#12459447

I'm thinking it might be a naming issue.

  • 0

which to this but it does not work :-(


@font-face {
font-family: 'Bold';
src: url('fonts/bold-webfont.eot');
src: local('?'), url('fonts/bold-webfont.woff') format('woff'),
url('fonts/bold-webfont.ttf') format('truetype'),
url('fonts/bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Book';
src: url('fonts/book-webfont.eot');
src: local('?'), url('fonts/book-webfont.woff') format('woff'),
url('fonts/book-webfont.ttf') format('truetype'),
url('fonts/book-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
[/CODE]

  • 0

Try this, make your font location absolute rather than relative.

@font-face {

font-family: 'Bold';

src: url('/fonts/bold-webfont.eot');

src: local('?'), url('/fonts/bold-webfont.woff') format('woff'),

url('/fonts/bold-webfont.ttf') format('truetype'),

url('/fonts/bold-webfont.svg') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Book';

src: url('/fonts/book-webfont.eot');

src: local('?'), url('/fonts/book-webfont.woff') format('woff'),

url('/fonts/book-webfont.ttf') format('truetype'),

url('/fonts/book-webfont.svg') format('svg');

font-weight: normal;

font-style: normal;

}

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I wonder what that line really meant...
    • draw.io Desktop 30.2.6 by Razvan Serea draw.io desktop is a downloadable security-first diagramming application that runs on Windows, MacOS and Linux. Creating diagrams in the desktop app doesn’t need an internet connection. This is useful when you are disconnected or when you must create diagrams in a highly secure environment, where data protection is of the utmost importance. When you use the draw.io desktop app, your diagrams will be stored on your local device. Because this is a stand-alone application, also designed to run offline, there are no interfaces to cloud storage platforms available. Of course, you can still store your diagrams in folders that are synchronised to your cloud storage if you wish. Easy-to-use diagram editor The draw.io apps work just like the office and drawing tools you are used to using. Drag and drop shapes from the shape libraries and drag to draw connectors between them. Drag connectors to add waypoints and set a precise shape and position, or let them reroute automatically. Double click and start typing to add a label to anything. Create tables and swimlane flows with a familiar tool. Style shapes and connectors with customisable palettes, sketch options, fonts and text formatting tools. Search for shapes, including in open-source icon libraries. Use our vast libraries of shapes and templates, organised into logical categories, to create a range of diagrams and infographics. Generate diagrams from text descriptions using our smart templates. Diagram faster with keyboard shortcuts. draw.io Desktop 30.2.6 changelog: Uses electron 42.5.0 #2452 Updates to draw.io core 30.2.6. Download: draw.io 64-bit | Standalone (Open Source) Download: draw.io 32-bit | ARM64 | ARM64 Standalone Links: draw.io Home Page | Project page @GitHub | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • One Month Later
      Excellence2025 earned a badge
      One Month Later
    • Week One Done
      Excellence2025 earned a badge
      Week One Done
    • Week One Done
      flexorcist earned a badge
      Week One Done
    • One Month Later
      Woland13 earned a badge
      One Month Later
    • Week One Done
      Woland13 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      497
    2. 2
      +Edouard
      207
    3. 3
      PsYcHoKiLLa
      146
    4. 4
      Steven P.
      74
    5. 5
      FloatingFatMan
      69
  • Tell a friend

    Love Neowin? Tell a friend!