CODEWITHSUNDEEP
cssinternet-explorer-7font-face
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

@font-face not working in IE7

I am trying all this different ways:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <style type="text/css">
    @font-face {
        font-family: "cursivas";
        src: url(Freestyle.ttf) format("truetype");
    }
    @font-face {
        font-family: "tabs";
        src: url(FrutigerLTStd-Bold.otf) format("truetype");
    }
    @font-face {
        font-family: 'topMenuFont';
        src: url('frutigerltstd-bold-webfont.eot');
        src: url('frutigerltstd-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('frutigerltstd-bold-webfont.woff') format('woff'),
             url('frutigerltstd-bold-webfont.ttf') format('truetype'),
             url('frutigerltstd-bold-webfont.svg#FrutigerLTStd65Bold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    p.customfont { 
        font-family: "cursivas";

    }
    p.tabs{
        font-family:'tabs';color:#8e8e8e;
    }
    p.menu{
        font-family:'topMenuFont';
    }
    p{
    font-size:30px;
        color:#8e8e8e;
    }
    </style>
    </head>
    <body>

    <p class="customfont">FAMILIAS  <span style="color:blue">RESERVAS</span></p>
    <p class="tabs">FAMILIAS  <span style="color:blue">RESERVAS</span></p>
    <p class="menu">FAMILIAS <span style="color:blue">RESERVAS</span></p>
    <p>FAMILIAS <span style="color:blue">RESERVAS</span></p>
    </body>

</html>

Path's are OK because they all work in FF,

any idea what am i missing?

Upvotes: 4

Views: 3115

Answers (2)

Willem
Willem

Reputation: 5404

Try the syntax described here:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

Got the link from fontsquirrel.com, they use it for all generated fonts. You can also take a look at the Google Web Font generated css (it only shows the fonts for the browser you use)

And load it in an external css file, that also might solve some problems.

Upvotes: 2

Bee San
Bee San

Reputation: 2665

If I remember correctly, IE 7 only supports EOT with @font-face, not TTF.

Upvotes: 0

Related Questions