CSS Font Face "#Iefix"

CSS Font Face declarations

Yes. Note that the font-style differs, so the fonts will be applied to their respective font styles (first to normal, second to italic)

font-family crash with @font-face src

As your code shows that you have included only .eot format webfont in body in css. The .eot format will work only on IE.

Now since you have added only url('../fonts/daxregular-webfont.eot') [notice 'regular'], the IE browser showing your text in regular or not-in-bold format. So if you want to display your text in-bold format on IE, you would need to add an additional url('../fonts/daxbold-webfont.eot') [notice 'bold'] definition in your css and also the relevant font in your font folder.

Now, why chrome displays it properly? I doubt if chrome would be showing your text in your desired font i.e. dax or .eot. Since you have not defined .woff font in your css (which chrome normally requires), most probably using some other font defined in some other css on your page.

To display your page consistently across all browsers using for custom font you would need to add all fonts definition in your css including adding the same in your font folder -

`@font-face {
  font-family: 'dax-regularregular';
  src: url('../fonts/daxregular-webfont.eot');
  src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/daxregular-webfont.woff2') format('woff2'),
       url('../fonts/daxregular-webfont.woff') format('woff'),
       url('../fonts/daxregular-webfont.ttf')  format('truetype'),
       url('../fonts/daxregular-webfont.svg#svgFontName') format('svg');
}`

---

UPDATE:

First, other then font definition mentioned above you'll also have to add other font formats definitions in your css like

for bold,

@font-face {
      font-family: 'dax-bold';
      src: url('../fonts/daxbold-webfont.eot');
      src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/daxbold-webfont.woff2') format('woff2'),
           url('../fonts/daxbold-webfont.woff') format('woff'),
           url('../fonts/daxbold-webfont.ttf')  format('truetype'),
           url('../fonts/daxbold-webfont.svg#svgFontName') format('svg');
    }

for semibold,

@font-face {
      font-family: 'dax-semibold';
      src: url('../fonts/daxsemibold-webfont.eot');
      src: url('../fonts/daxsemibold-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/daxsemibold-webfont.woff2') format('woff2'),
           url('../fonts/daxsemibold-webfont.woff') format('woff'),
           url('../fonts/daxsemibold-webfont.ttf')  format('truetype'),
           url('../fonts/daxsemibold-webfont.svg#svgFontName') format('svg');
    }

and so on including relevant fonts in font folder, whichever you need.

Second, for getting these fonts. Not sure but I think your dax font seems a licensed font and not the free one. If yes, then you can convert all above mentioned formats using the ttf / otf font which would have been installed in your system's 'Font' folder. To convert just copy the 'regular' or 'bold' font from that font folder on your desktop and then convert it using website like 'Font Squirrel'

UPDATE 2

1. The IE needs .eot version web-font only, having .woff won't affect text in any IE version. So don't fear of .woff.

2. You need to correct your font definition, which is still incorrect in your last post -

for regular or unbold font,

@font-face {
    font-family: 'dax-regularregular';
    src: url('../fonts/daxregular-webfont.eot');
    src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype');
}

for bold format font,

@font-face {
    font-family: 'dax-bold';
    src: url('../fonts/daxbold-webfont.eot');
    src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
}

Your html should look like this -

<p style="font-family: 'dax-regularregular';"><span style="font-family: 'dax-bold';">bold text lying here</span> unbold text lying here</p>

It should work proper across.

Note: Have shown applying font in inline tag to demonstrate html structure, please use your class for the same.

On IE CSS font-face works only when navigating through inner links

I found a solution but I cannot see the reason why it works (well, only one reason - it's IE :D).

What I did was to put the same site on Apache and test again. On Apache the fonts worked fine even when using Refresh button. Then in the network inspector I saw that Apache is returning 304 instead of 200 for the eot file and it hit me - so it's caching issue. I went to my ASP.NET app and sure enough - for security reasons (and also to avoid caching AJAX requests) someone had disabled every caching you could imagine:

        // prevent caching for security reasons
        HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);
        HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        HttpContext.Current.Response.Cache.SetValidUntilExpires(false);
        HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        HttpContext.Current.Response.Cache.SetNoServerCaching();

        // do not use any of the following two - they break CSS fonts on IE
        HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        HttpContext.Current.Response.Cache.SetNoStore();

As soon as I commented out the last two lines of code, suddenly fonts started to work without problems on IE. So I guess the answer is: IE cannot load the font if it is not cached. I have no idea why the problem happens only when refreshing/navigating back, though.

Edit - Alternative solution

Instead of commenting those last two lines

    // do not use any of the following two - they break CSS fonts on IE
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    HttpContext.Current.Response.Cache.SetNoStore();

Change the SetAllowResponseInBrowserHistory to true instead:

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true);

This should still allow no-cache with the exception of back and forward navigation as I understand it.
MSDN - SetAllowResponseInBrowserHistory Method

Custom font not displaying with @font-face?

I think the way you write it (i.e. separate src definitions for all the available formats) makes the woff2 format overwrite all the others, so if a browser can't handle woff2, it won't work.

So instead of all those semicolons and repeated src, try it this way:

@font-face {
    font-family: 'Robotica';
     src: url('robotica.eot') format('embedded-opentype'),
          url('robotica.woff') format ('woff'),
          url('robotica.ttf') format ('truetype'),
          url('robotica.otf') format ('opentype'),
          url('robotica.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
} 

(same/similar for the other font)

EDIT (moved from comment to answer): In addition, you should remove the spaces between format and the subsequent opening parenthesis of the format description (like format('woff') instead of format ('woff').

@font-face is not working for CSS with correct format, generation, and directory path

I found out what was the issue:

@font-face {
  font-family: "Sevastopol_Interface";
  src: url("Fonts//Sevastopol-Interface//Sevastopol-Interface.ttf");
}

The issue is that my path was not quite right. Backslashes are indeed correct but I needed two of them instead of one as I am on a windows machine. Not something like linux where you would only need one. Thanks to @Syed Muhammad Moiz and @Kusal Darshana for leading me to that conclusion.

Properly defining font-family in @font-face CSS rules

the first example, though hard to believe, is correct; notice how the Droid Serif Regular is being declared as font weight normal and font style normal...how you'd expect a regular font to be displayed. the second declaration, it's calling in Droid Serif Italic, and setting it to to font-style:italic; this allows you to use multiple fonts within a family. If you wanted to add a bold font, you'd apply the same @font-face rule except you'd change font-weight:bold, while leaving font-style:normal and declaring the same font family.

fontsquirrel really does a great job with rendering @font-face rules, actually i've read about this technique there. surprised it's not being implemented. you can read more about this here: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

---

Related Topics