CSS Embedded Font Does Not Appear On Webpage Using Brackets

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.

Solution

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>