CSS Embedded Font Does Not Appear On Webpage Using Brackets

Question

I'm very new to web development, so I apologize if this is a silly mistake, but I can't seem to get a font that I've embedded in my CSS stylesheet, Fonarto, to appear on my webpage. I'm using Brackets to create the website, viewing it actively with the live preview, so I wonder if that has a role in creating this issue. Given that I'm not experienced with CSS, I used fontsquirrel.com to automatically generate code that would add my font in using an @font-face. This is what it generated, with a few tweaks (the font is stored in resources/fonts/fonarto/regular)

@font-face {
    font-family: 'fonarto_regular';
    src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot');
    src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot?#iefix') format('embedded-opentype'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.woff2') format('woff2'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.woff') format('woff'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.ttf') format('truetype'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.svg#fonartoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

To add the style to the body, I'm doing what would be expected, though I haven't provided any fallbacks (should I be doing so, and if so, how?).

body {
    font-family: 'fonarto_regular';
}

The code for my index page is as follows:

<!DOCTYPE html>
<html>
    <style rel="stylesheet" type="text/css" href="stylesheet.css"></style>
    <script>
    </script>
<head>
</head>
<body>
    <div id='index-head'>
        <h1>Site Name Here</h1>
    </div>
</body>
</html>

That is literally it thus far. And though, as I mentioned, I haven't added any fallbacks or done anything complicated, the header text, Site Name Here, displays in serif Times New Roman in the live preview.

What am I doing wrong?

Note that I've already looked at all of these posts on Stack Overflow, but none has helped; nor has w3schools. Also keep in mind that the live preview runs an instance of Chrome.

i think the font stored in the file is not loading or it is not getting the correct path for the font.. or i think you should use 'resources/fonts/fonarto/regular/fonarto-webfont.eot' — Amit singh, Aug 10 '15 at 07:20
@Amitsingh That was my guess as well. I might try moving it... I'll let you know what happens. I also tested the page on Xpressive, so it's not Brackets. — jmindel, Aug 10 '15 at 07:21
@Amitsingh Nope! No luck. If it's a file issue, it must then be that the file is not loading. I tried putting the font files into the website's root folder, and changing the `url()`'s, but that didn't fix the issue. — jmindel, Aug 10 '15 at 07:24
i guess change the code from font-family:'fonarto_regular !important' — Amit singh, Aug 10 '15 at 07:26

score 1 · Accepted Answer · answered Aug 10 '15 at 07:21

1

There are a few things you can check. First of all, look in the inspector and see if you properly link to the fonts.

Also you should link to the css file this way:

<link rel="stylesheet" href="stylesheet.css">

You also have linked to the file outside your head tags.

<html>
  <head>
   <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
  </body>
</html>

answered Aug 10 '15 at 07:21

Olli

171
6

It was a matter of the `` tag. Thanks! I'll accept once Stack Overflow allows me to. – jmindel Aug 10 '15 at 07:26
@Jenguinie is this really helped you? It doesn't matter in which way you link your css. – AleshaOleg Aug 10 '15 at 07:26
He linked outside the head tags. That way you wont get a reference towards the css file. – Olli Aug 10 '15 at 07:28

score 0 · Answer 2 · answered Aug 10 '15 at 07:22

0

try adding the entire URL for the fonts.

Check if that works.

answered Aug 10 '15 at 07:22

Jared

471
1
3
17

score 0 · Answer 3 · answered Aug 10 '15 at 07:24

Download @font-face of Fonarto from here, then add index.html with follow code on the same folder with fonts and stylesheet.css.

HTML

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
  <div>Hello</div>
</body>
</head>
</html>

Also add to stylesheet.css

body {
    font-family: 'fonarto_regular';
}

For me it's working fine!

CSS Embedded Font Does Not Appear On Webpage Using Brackets

3 Answers3