<!DOCTYPE> directive commentd on Internet Explorer

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
11 years ago
(Sorry for my bad English)
I want to use web fonts in my theme for nopCommerce 2.5, I am using @font-face in css and define my font. This works fine in Firefox and Chrome, but in Internet Explorer 9.0 my fonts did not work correctly, i find that it use IE8 or IE7 method for web font, but I am using IE9!
(So when I have two font declaration in my css, one for normal font weight and another for Bold, only normal font is used).
CSS works fine in Firefox and Chrome. Also my theme works fine in Admin area and I can see Bold and Normal fonts without any problem in Administration pages in IE9 (So my font files are correct and my css font-face is correct too).
I test my CSS and Theme in another project, my test page works without any problem in IE9 and normal behavior in IE8 , 7.
So I find there is some problem with Nop.Web project and Internet Explorer.
After some research and compare, I find that <!DOCTYPE> directive defined in _Root.cshtml but when I see my page source in Internet Explorer this tag is commentd :
<!-- DOCTYPE html -->

Why this directive tag is commented in IE?

In FF and Chrome this directive did not comment, I change this tag in _Root.cshtml and add more than one tag in _Root.cshtml, but all of them were commened in IE!!

I think this is source of my Web-Font problem.
11 years ago
OK, I Find reason of this problem, this is so strange and marvelous.
I've added one line comment on top of _Root.cshtml! In Internet Explorer when there is some comment in the beginning of HTML, IE comments <!DOCTYPE>, I don't know why.
I removed any comments before <!DOCTYPE> tag and every things work fine.
<!DOCTYPE> did not comment and all fonts works perfectly in IE9 and its normal bad behavior in IE8 and IE7.

I research on the web for best method to add web-fonts to a web site, this is the best definition I find and works perfectly on IE9, FF 3.5+, Chrome (Also works on IE 7-8 but IE7 and IE8 don't support font-family inherit, so the bold font don't load in IE8 and it use faux-bold of normal font (First font-face definition)), for anyone wants web fonts on nopCommerce :

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

@font-face
{
  font-family: 'myFont';
  src: url('/fonts/myFontBold.eot');
  src: local('☺'),
    url('/fonts/myFontBold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/myFontBold.woff') format('woff'),
    url('/fonts/myFontBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.