• 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 always thought the moon gets a lot of impact because there’s no atmosphere, so surely building a moon base is only going to end in disaster?
    • Gets them every time !  
    • This piece of ###### is probably one of the most hated apps that ever existed.
    • Microsoft is bringing a much-needed Recap app to Teams, here is a first look by Usama Jawad Microsoft Teams is heavily used in work and school environments, and perhaps one of its core but extremely useful features is the ability to record meetings. In past years, Microsoft has further improved upon this functionality by integrating AI, but you do need a Microsoft 365 Copilot license to leverage most, if not all, all of those capabilities. Now, the Redmond tech firm is making another significant enhancement in the area of Teams meeting recordings. Up until now, if you wanted to access Teams recordings, you had to arduously locate the meeting invite and navigate to the dedicated tab, or go to the cloud storage location such as a SharePoint site. This was a rather overwhelming activity, especially if you don't remember the name of the meeting or the meeting occurred quite a while ago. Microsoft is now attempting to solve this problem through a dedicated Recap app that consolidates all your recordings. This centralized experience will allow users to find all recordings from the past 30 days and also offer access to other related services such as transcripts and AI-powered summaries. Customers will have the option to search for recordings, filter them, and review multiple meetings by generating AI-powered podcast-style recaps. The Recap app will list all available recordings in both thumbnail and list views. The former is shown below: And here is how Teams users with a Microsoft 365 Copilot license can select multiple recordings to generate a podcast-style audio recap: Microsoft has emphasized that the Recap app is pre-installed in Teams but it will not be pinned by default. Users will able to navigate to the Teams app store from the left rail, and pin it from the apps section. It will be enabled by default for all users once it becomes available. It's worth noting that while Teams recordings and transcripts can be accessed by all users governed by existing permissions, AI-powered features like intelligent summaries, audio recaps, and video recaps will require a Microsoft 365 Copilot license. The Recap app will be generally available to Teams users on Windows, Mac, and the web by the end of next month, with mobile support coming soon.
    • It's so stupid that you have to "enroll" in these extended updates.
  • Recent Achievements

    • Week One Done
      tuben earned a badge
      Week One Done
    • First Post
      OffsetAbs earned a badge
      First Post
    • Reacting Well
      OffsetAbs earned a badge
      Reacting Well
    • First Post
      Kolakid60 earned a badge
      First Post
    • Week One Done
      xvvxcvv earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      424
    2. 2
      +Edouard
      183
    3. 3
      PsYcHoKiLLa
      149
    4. 4
      Steven P.
      71
    5. 5
      FloatingFatMan
      71
  • Tell a friend

    Love Neowin? Tell a friend!