The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Getting HTML to grab font from the CSS File (Font-Family), Font-Family
ConcordT
post Oct 1 2017, 12:44 PM
Post #1





Group: Members
Posts: 2
Joined: 1-October 17
Member No.: 26,507



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!




Attached image(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 1 2017, 12:59 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



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).

QUOTE
(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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ConcordT
post Oct 1 2017, 03:53 PM
Post #3





Group: Members
Posts: 2
Joined: 1-October 17
Member No.: 26,507



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 1 2017, 05:25 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



QUOTE(ConcordT @ Oct 1 2017, 10:53 PM) *

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.

QUOTE
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.

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

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

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

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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 13th December 2017 - 02:34 AM