CODEWITHSUNDEEP
cssfontsfont-face
Tommay
Tommay

Reputation: 1617

Font Not Showing Up?

I'm almost 100% sure what I'm doing is exactly correct Here's what I have so far:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="homepage.css"/>

</head>
<body>
    <div id="menu">
        <p>THE BIG BLUE SITE OF SAILING KNOWLEDGE</p>
    </div>
</body>
</html>

CSS:

@font-face: {font-family: "ostrich-reg"; src: url('Fonts/ostrich-regular-webfont.ttf'); }
@font-face: {font-family: "ostrich-light"; src: url("Fonts/ostrich-light.ttf"); }
@font-face: {font-family: "collab"; src: url("Fonts/ColabThi.otf"); }

#menu {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    height: 100vh;
    width: 27%;
    background: #2d5dac;
    text-align: center;
}

#menu p {
    color: white;
    font-family: ostrich-reg;
    font-size: 60px;
}

There's really not much there, not much room for error, so I thought it was my file. I got the file from Font Squirrel, which from what I've heard is a pretty reliable source (I've used them several times before myself), but just for fun I ran it through their webfont generator and it still didn't work. Also, I've straight up tried using another file and got the same result (it was another format as well - .0tf). So I've got no idea. Any suggestions?

By the way, I know this won't work on IE, I literally just started making the site today and I'm not too concerned with that yet.

Here's what happens when I try filtering for fonts: Filtering for Fonts...

So, as long as I'm doing this right, I'm pretty sure that means the fonts aren't loading. Which is weird, because I'm pretty sure the path is indeed correct... The Fonts folder is in the same folder that the .html file is in, and the fonts are directly in the Fonts folder.

Upvotes: 0

Views: 2897

Answers (1)

Ankit
Ankit

Reputation: 502

I used this font on one of my project. I used something like this in my CSS file (still I use my all font in this manner only)

CSS

@font-face {
    font-family: 'OstrichSansCondensedLight';
    src: url('ostrich-light-webfont.eot');
    src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('ostrich-light-webfont.woff') format('woff'),
         url('ostrich-light-webfont.ttf') format('truetype'),
         url('ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

But I used .eot, .woff, .ttf, .svg files. And yes it was working on IE8+ because I used src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),

let me know if you are facing any issue or any font file is missing I can try to find that for you.

Upvotes: 1

Related Questions