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!

[Christian J]

The URLs of the font files need to point to the directory the files are stored in. In this case see if this might work:

CODE

url('webfontkit-20171001-122444/lifesavers-regular-webfont.ttf')

(do the same for the other files as well).

(I am actually not sure where the font which is being used is coming from)

It's probably the browser's default font. You can also specify a list of fonts in the CSS, see e.g. http://htmlhelp.com/reference/css/font/font-family.html --this might be helpful in case someone's browser doesn't support font embedding (but I think they all do now, except perhaps older smartphones still in use).

[ConcordT]

Thanks for the suggestion.
I've tried this and a few other things from the web. Now, I lose all by styling for the page. Content shows up in the browser, but, with no style at all.
I tried a few other things as well, still no luck. Maybe it will work with an actual URL once I upload. For now, I have commented out and will deal with as-is.
Thanks again.

1. Tried 3 versions for each font

src: url('webfontkit-20171001-122444/lifesavers-regular-webfont.ttf')format('ttf'),
src: local('webfontkit-20171001-122444/lifesavers-regular-webfont.ttf')format('ttf'),
src: ('webfontkit-20171001-122444/lifesavers-regular-webfont.ttf')format('ttf'),


2. Could not get my styling back until I commented out both @font-face sections.


This post has been edited by ConcordT: Oct 1 2017, 03:57 PM

[Christian J]

Now, I lose all by styling for the page. Content shows up in the browser, but, with no style at all.

That sounds like a syntax error in the CSS, can you post the complete stylesheet? That said, http://jigsaw.w3.org/css-validator/validator didn't complain about the CSS in your first post.

src: url('webfontkit-20171001-122444/lifesavers-regular-webfont.ttf')format('ttf')

I think the format value should be "truetype" or "opentype" for .ttf files. You can also remove format altogether, since it's optional.

src: local('webfontkit-20171001-122444/lifesavers-regular-webfont.ttf')

That might work too, if you have the file on your own computer.

src: ('webfontkit-20171001-122444/lifesavers-regular-webfont.ttf')

That looks incorrect, it must be url or local, AFAIK.