Custom Font is not displaying in IE

Question

Here : http://thunderstorm999.byethost9.com/

Oberserve the footer text.It is not the same in IE as in the Chrome and Firefox browser.My font is not displaying as it should in IE. Also due to this the alignment in IE is not the same as it is in Firefox and Chrome.Also the layout appears a bit different in IE and in other browser.Please tell me where am I going wrong.What is the issue I am facing for IE.Please follow the link above.

@font-face {
 font-family: 'footerFont';
 src: url('UniversLTStd-LightCn.eot'),url('UniversLTStd-LightCn.otf'),url('UniversLTStd-LightCn.ttf');
 }

header{

width:1366px;

}

.logo{

padding-left:80px;

margin-left:36px;

margin-bottom:10px;

margin-top:36px;



}

.share{

list-style:none;

float:right;

margin-right:60px;

margin-left:36px;

margin-top: -36px;



}

.share li{

display:inline;

padding-right:20px;

}

aside{

margin-left:-10px;

 border-right: 1px dotted red;

height:622px;

width:128px;

margin-top:-7px;

}

aside li{

width:60px;

margin-left:1px;

}

.navigation{

list-style:none;

padding-top:10px;

}

.navigation li{

text-align:center;

margin-bottom:20px;

}

.social_icons{

list-style:none;

padding-top:10px;

margin-top: 88px;

}

.social_icons li{

text-align:center;

margin-bottom:10px;

}



.main-image .image1{

position: absolute;

 border-top-style: solid; 

 border-top-width: 0px;

 margin-left: 119px;

 top: 78px;

}

footer{
   width: 1365px;
    font-size:11.333333px;
 padding:0;
    height: 30px;
    border-top: 1px dotted red;
 font-family:"footerFont",Times New Roman, Georgia, Serif;
 position:relative;

}
.left_footer{
list-style:none;
margin-left:-42px;
margin-bottom:0px;
margin-top:-20px;
}
.left_footer p{
display:inline;
float:left;
}
.footer_p1{
margin-left: 108px;
padding-right:15px;
margin-top:18px;
}
.footer_p2{
margin-top:18px;
margin-left: 2px;
}
.right_footer{
list-style:none;
margin-bottom:0px;
margin-top:-20px;
margin-right:-42px;
}
.right_footer p{
display:inline;
float:right;
position:absolute;
}

.footer_p3
{
right:16px;
margin-top:18px;
}

.footer_p4
{
right:164px;
margin-top:18px;
}




.clearfix:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;

}

 

.clearfix {

    display: inline-block;

}

 

html[xmlns] .clearfix {

    display: block;

}

 

* html .clearfix {

    height: 1%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speck</title>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">

 $(function(){
  
  $('#play').click(function() { $('#slider').cycle('resume'); return false; });
  
  $('#pause').click(function() { $('#slider').cycle('pause'); return false; });

 $('#slider').cycle({
  
  fx:   'scrollHorz',
  next:  '#next',
  prev:  '#prev',
  pager:  '#pager',
  timeout: 3000,
  speed:  900
  
 });
});
</script>
<style type="text/css">

#hero {
 width: 1245px;
 height: 622px;
 display: block;
 position: absolute;
 top: 78px;
 left: 127px;
}

#slider {
 width: 1245px;
 height: 622px;
 display: block;
 position: absolute;
 overflow: hidden;
}

.info {
 width: 960px;
 height: 80px;
 display: block;
 position: relative;
 bottom: 100px;
 background: rgba(102,204,204,.2);
 z-index: 99;
}

.info h2 {
 font-family: sans-serif;
 font-size: 20px;
 font-weight: bold;
 color: #FFF;
 padding: 15px 0 0 20px;
}

.info p {
 font-family: sans-serif;
 font-size: 15px;
 font-weight: ligher;
 color: #FFF;
 padding: 0 0 0 20px;
 line-height: 1px;
}

#play {
 width: 40px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 display: block;
 position: absolute;
 top: 0;
 right: 44px;
 background: rgba(102,204,0,.2);
 color: #FFF;
 cursor: pointer;
 z-index: 999;
 transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
}

#pause {
 width: 40px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 display: block;
 position: absolute;
 top: 0;
 right: 88px;
 background: rgba(102,204,0,.2);
 color: #FFF;
 cursor: pointer;
 z-index: 999;
 transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
}
#next {
 width: 40px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 background: rgba(102,204,0,.2);
 color: #FFF;
 cursor: pointer;
 z-index: 999;
}
#prev {
 width: 40px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 display: block;
 position: absolute;
 top: 0;
 right: 133px;
 background: rgba(102,204,0,.2);
 color: #FFF;
 cursor: pointer;
 z-index: 999;
}

#pager {
 width: 100%;
 text-align: center;
 display: block;
 position: absolute;
 cursor: pointer;
 z-index: 999;
}

#pager a {
 font-size: .0em;
 color: transparent;
 width: 10px;
 height: 10px;
 display: inline-block;
 position: relative;
 border: 1px solid #FFF;
 border-radius: 20px;
 background: transparent;
 margin: 10px;
}

#pager a.activeSlide { background: #FFF;}

</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="images\logo.png"/>
</div>
<ul class="share">
<li><img class="image1" src="images\fade.png"/></li>
<li><img class="image2" src="images\cart.png"/></li>
<li><img class="image3" src="images\share.png"/></li>
</ul>
</header>
<aside>
<ul class="navigation">
<li><a href="#"><img id="image1" src="images\explore.png"/></a></li>
<li><a href="#"><img src="images\material.png"/></a></li>
<li><a href="#"><img src="images\team.png"/></a></li>
<li><a href="#"><img src="images\contact.png"/></a></li>
<li><a href="#"><img src="images\merchandise.png"/></a></li>
</ul>
<ul class="social_icons">
<li><a href="#"><img id="image1" src="images\fb.png"/></a></li>
<li><a href="#"><img src="images\vimeo.png"/></a></li>
<li><a href="#"><img src="images\linkedin.png"/></a></li>
</ul>
</aside>
<div id="hero">

 <div id="pager"></div>
    <div id="pause">&asymp;</div>
    <div id="play">&Delta;</div>
    <div id="next">&rang;</div>
    <div id="prev">&lang;</div>

 <div id="slider">
    
     <div class="items">
         <img src="01-secret-gathering.jpg">
          <div class="info">
                 <h2>The Secret Gathering</h2>
                    <p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
             </div><!--End--info-->
        </div><!--End--Items-->
        
        <div class="items">
         <img src="02-sky-race.jpg">
          <div class="info">
                 <h2>The Sky Race Begins</h2>
                    <p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
             </div><!--End--info-->
        </div><!--End--Items-->
        
        <div class="items">
         <img src="03-sky-wall.jpg">
          <div class="info">
                 <h2>The Sky Wall Rising</h2>
                    <p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
             </div><!--End--info-->
        </div><!--End--Items-->
        
        <div class="items">
         <img src="04-sun-ring.jpg">
          <div class="info">
                 <h2>The Sun has Rings</h2>
                    <p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
             </div><!--End--info-->
        </div><!--End--Items-->
        
        <div class="items">
         <img src="05-moon-duality.jpg">
          <div class="info">
                 <h2>The Moon Duality</h2>
                    <p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
             </div><!--End--info-->
        </div><!--End--Items-->
    
    
    </div><!--End--Slider-->

</div>
</div>
<footer>
<ul class="left_footer">
<li><p class="footer_p1">&copy; COPYRIGHT 2015 SPECK</p></li>
<li><p class="footer_p2">TERMS & CONDITIONS</p></li>
</ul>
<ul class="right_footer">
<li><p class="footer_p3">DEVELOPED BY IDEATE FUSION</p></li>
<li><p class="footer_p4">DESIGNED BY SPECK</p></li>
</ul>
</footer>
</body>

</html>

score 0 · Answer 1 · answered Feb 15 '15 at 08:46

0

you should use this method for path .EOT font for IE :

 src: url('../font/Yekan.eot?#iefix') format('embedded-opentype')

answered Feb 15 '15 at 08:46

mahyar alirezaei

19
6

Tried using the above code.. Still the issue persist. Updated on the link : http://thunderstorm999.byethost9.com/ – user1538020 Feb 15 '15 at 09:05
use truetype for ttf like this : url('../font/Yekan.ttf') format('truetype') and check font path – mahyar alirezaei Feb 15 '15 at 09:55
Tried with the above code too.. Still it is not working .. :( – user1538020 Feb 15 '15 at 12:20

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Check the IE console (after pressing F12). On your page I got:

CSS3114: @font-face failed OpenType embedding permission check.
Permission must be Installable. 
UniversLTStd-LightCn.otf

This might required editing the otf font. See for example.

Also at w3schools on fontface:

1 Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

2 IE: The font format [TTF/OTF] only works when set to be "installable".

Custom Font is not displaying in IE

2 Answers2

Linked