• 0

IE not seeing @font-face in Wordpress


Question

I'm designing a blog for a website and for some reason IE can't see the font-face in my css style sheet. Chrome, Safari and Firefox see the font-face fine but not for IE. What I'm I doing wrong?

Works fine if it's not in wordpress, aka XHTML or HTML5!


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

.widget h2 {
color: #333;
font: 22px 'Book', Helvetica, sans-serif;
margin:0 0 6px 0;
}

[/CODE]

10 answers to this question

Recommended Posts

  • 0

I think it's trying to load the second line also, and failing. Remove the first like and separate the hacks out....

this works for me at http://www.nationwide.co.uk


@font-face{
font-family:nbsBold;
src:url(/_/fonts/nbs-bold-webfont.eot?#ieNo404) format("eot");
src:local("?"),url(/_/fonts/nbs-bold-webfont.woff) format("woff"),url(/_/fonts/nbs-bold-webfont.ttf) format("truetype");
}
[/CODE]

  • 0

local("?")

You shouldn't need that, in fact all it will do is slightly slow down the resolution process. If you don't want to load a font from the local system simply leave out the local() declaration, don't give it invalid data.

That's so that IE6+ doesn't follow that line. IE should just obey the first line and then stop at the #.

Even the generator code didn't work for me, I did a bit of trial and error.

  • 0

IE6 doesn't support anything other than src: url();, even including a format() parameter breaks it (And it only ever uses 1 src:; property, the first one)

Exactly, IE will try and use the Woff file if I don't hack that line with a local src. (and then break). I didn't just put it there for fun.

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

    • No registered users viewing this page.
  • Posts

    • 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
      499
    2. 2
      +Edouard
      209
    3. 3
      PsYcHoKiLLa
      146
    4. 4
      Steven P.
      74
    5. 5
      FloatingFatMan
      70
  • Tell a friend

    Love Neowin? Tell a friend!