CODEWITHSUNDEEP
cssfont-face
Qcom
Qcom

Reputation: 19163

@font-face not working properly

For some reason, my @font-face setup isn't working correctly.

The website I'm working on his located here.

The odd thing is, I used fontsquirrel just like I have before, but this time, it doesn't appear to be working correctly.

Here is my HTML index page which contains the links to the external stylesheets:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TileTabs</title>

    <link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico">
    <link rel="stylesheet" href="css/SegoeWPRegular.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
    <script src="js/tile_interaction.js"></script>
</head>
<body>
    <div id="header">
        <img src="images/logo/logo_v3.png" alt="logo" />
    </div>

    <div id="content">
        <ul>
            <li>
                <div id ="google" class="tile">
                    <img src="images/tiles/google/google.png" class="tile_image" width="27" height="41" />
                    <p>Google</p>
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
        </ul>
    </div>

    <div id="footer">
        <a class="emailus" href="index.htm">Home</a> | <a class="emailus" href="about.htm">About</a> | <a class="emailus" href="contact.htm">Contact</a>
    </div>
</body>
</html>

Here is my SegoeWPRegular.css file (the style generated by fontsquirrel):

@font-face {
    font-family: 'SegoeWPRegular';
    src: url('segoewp-webfont.eot');
    src: local('☺'), url('segoewp-webfont.woff') format('woff'), url('segoewp-webfont.ttf') format('truetype'), url('segoewp-webfont.svg#webfontBtwagPKd') format('svg');
    font-weight: normal;
    font-style: normal;
}

Finally, here is my general stylesheet, style.css:

body {
    background: #F6F6F6;
    font-family: 'SegoeWPRegular';
    /*, 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif;*/
    margin: 0;
}

a:link, a:visited, a:hover, a:active {
    color: white;
    text-decoration: none;
}

h1, ul {
    margin: 0;
}

#header {
    width: 920px;
    background: #999;
    margin: 0px auto;
    text-align: center;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;


}

#content {
    width: 920px;
    height: 760px;
    background: #999;
    margin: 0px auto;
}

#footer {
    width: 920px;
    background: #999;
    margin: 0px auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;

    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;    
}

li {
    float: left;
    list-style: none;
    padding: 34px;
}

.tile {
    cursor: pointer;
    background: red;
    /*border: 2px solid #000;*/
    width: 100px;
    height: 100px;
}

#google {
    background: #1E98DB;
}

.tile_image {
    padding-left: 25px;
    padding-top: 25px;
}

.tile p {
    color: white;
    font-size: 13px;
}

What am I doing wrong?

Upvotes: 2

Views: 1514

Answers (1)

Bryan Downing
Bryan Downing

Reputation: 15472

The site you linked can't find the fonts. I'm seeing a 404 error for:

http://www.tiletabs.com/css/segoewp-webfont.woff

and

http://www.tiletabs.com/css/segoewp-webfont.ttf

Upvotes: 2

Related Questions