CODEWITHSUNDEEP
htmlcss
user2012677
user2012677

Reputation: 5765

Web Fonts not showing up

For some reason, I can not get my fonts to appear on the page. I am opening this up from a static page on my computer. The html, css and fonts are all in the same folder. I have tried adding "./" and "/" in front of the the font location, but it did not work. The CSS file is loading. Thoughts?

font.css

@font-face {
    font-family: 'American-Typewriter';
    src: url('american-typewriter.eot');
    src: url('american-typewriter.eot?#iefix') format('embedded-opentype'),
         url('american-typewriter.woff2') format('woff2'),
         url('american-typewriter.woff') format('woff'),
         url('american-typewriter.ttf') format('truetype'),
         url('american-typewriter.svg#american_typewriterregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.American-Typewriter {
    font-family: 'American-Typewriter';
}

webpage.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="font.css">
    </head>    
<body>
         <h1 class='American-Typewriter'> American-Typewriter   </h1>
    </body>
    </html>

Upvotes: 0

Views: 1521

Answers (3)

Jack Bashford
Jack Bashford

Reputation: 44145

If they're in the same folder, then you don't need anything before the filename!

/ is used when the object you're looking for is in a folder, and ../ is used when it's in the folder enclosing the current folder, e.g. the one the file is in.

Upvotes: 0

Varun Singh
Varun Singh

Reputation: 49

You need to first use code in your code in order to have standard HTML as below.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font.css">
</head>
<body>
     <h1 class='American-Typewriter'> American-Typewriter   </h1>
</body>
</html>

Also you need to download the font if you still not able to see it from below link.

http://fontsgeek.com/fonts/American-Typewriter-Regular

Upvotes: 0

Gokul Sridhar
Gokul Sridhar

Reputation: 131

I think this is a problem with addressing. Try using only /

Upvotes: 1

Related Questions