Getting HTML to grab font from the CSS File (Font-Family), Font-Family Options

[ConcordT]

Hi.

I'm pretty new to HTML/CSS so appreciate any help.
I purchased an HTML/CSS template and am tweaking to my needs.

I want to include the font of my logo, which is open license.

I am obviously not doing the correct thing in the HTML file cause that font is not being used. (I am actually not sure where the font which is being used is coming from)
Currently working locally, not published to the web yet.

What I did: (Refer to below for code segments and attachment)
1. I created the webfontkit out on Fontsquirrel and placed into my CSS file. I added a line for the .ttf file - which I originally downloaded from there.
2. I added the .ttf, .woff and woff2 files to my directory where my other web files are. In a folder name - "webfontkit-20171001-122444"
3. Tried to reference the CSS in HTML.
Result - wrong font for "Sniff Digital Text Logo H1"

CSS font-family declaration
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 1, 2017 */
@font-face {
font-family: 'life_saversregular';
src: url('lifesavers-regular-webfont.ttf') format('ttf'),
url('lifesavers-regular-webfont.woff2') format('woff2'),
url('lifesavers-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'life_saversbold';
src: url('lifesavers-bold-webfont.ttf') format('ttf'),
url('lifesavers-bold-webfont.woff2') format('woff2'),
url('lifesavers-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

From CSS Header section (portion)
/* Header */

#header {
position: relative;
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
margin: 0;
padding: 14em 0 14em 0;
cursor: default;
}

#header header {
display: inline-block;
padding: 0 0 4.5em 0;
}

#header header h1 {
font-family: 'life_saversregular';
font-weight: 600;
font-size: 2em;
letter-spacing: 10px;
}

Where files are stored - refer to attachment

From HTML
<!-- Header -->
<section id="header">
<header>
<img src="images/SniffLogoOF.jpg" alt="Sniff Logo" style="width:350px;height:200px;">
<h1>Sniff Digital Text Logo H1</h1> <!--Trying to get this to Lifesavers font-->
<p>id=header text</p>
</header>
<footer>
<a href="#banner" class="button style2 scrolly-middle">Cubilia at consectetur</a>
</footer>
</section>

Thanks for any help getting header.h1 to show as lifesavers_regular font!