Hello

I am attempting to grasp how to embed fonts in a Web page. I understand that this is the code required AND that the font itself needs to be installed in the fonts folder on a server:

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

What, however, if the font has two names, as in Dafont's Jenna Sue?

How would I reference that in my CSS as a ttf, eof, and woff, again assuming those fonts are installed in the fonts folder of my server?

Thanks!

SteveHi, you need to also keep in mind that not all fonts can be embedded. The font's author determines the restrictions, if any, (if they know how!). An installed font editing program is needed to see the embedding settings.

Thanks for your message.

Yes, this font is free for personal and commercial use: http://www.dafont.com/jenna-sue.font

But how would I script it? One of these:

@font-face {
font-family: Jenna Sue;
src: url('../fonts/JennaSue-webfont.eot');
src: url('../fonts/JennaSue-webfont.ttf'); \
src: url('../fonts/JennaSue-webfont.woff');
src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');
}

@font-face {
font-family: "Jenna Sue";
src: url("JennaSue.eot") /* EOT file for IE */
src: url("JennaSue.ttf") /* TTF file for CSS3 browsers */
src: url("JennaSue.woff") /* TTF file for CSS3 browsers */
src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');
}

@font-face {
font-family: 'Conv_JennaSue';
src: url('fonts/JennaSue.eot');
src: local("Jenna Sue"), url('fonts/JennaSue.woff') format('woff'),
url('fonts/JennaSue.ttf') format('truetype'),
url('fonts/JennaSue.svg') format('svg');
}

Thanks.

Steve

@SteveHi before you do that, I suggest you contact the author/designer of the font and get his/her thoughts regarding your use of the font as a web font. Using the font that way might be interpreted as no longer personal by that particular author/designer.

Second, what you described is not embedding. Also, the font can be located anywhere in the server as long as your @font-face declarations use the correct path to the font. There is a way to embed a font but that is beyond the point.

As for your question on font names, I suggest you read this specs as the issues you raised are answered there http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/ Use your browsers Find function to jump to the @font-face section. Be reminded that this document is a technical specification but I am sure you would not find it hard to understand what is in there.

BTW have you tested the various possibilities that you showed? Which one works? Or all 3 works?

The font name referred in "font-family: myFirstFont;" is the internal name of the font. The font name in "src: url(sansation_light.woff);" is the file name of the font. You can change this to anything you want like a.woff. As for other things, see the specs.

Thanks for your message.

I have all of those in my CSS and the font on the server, and using a laptop I have, I cannot see the font. Presumably because I am
not embedding them correctly, as you indicate.

I can contact the author, yes, but the author/creator was very explicit: free for commercial/personal use.

Thanks for the link - I'll check it out now because I am keen to get this resolved.

Not really, In Windows Explorer go to the font-file. Right click and click Properties and then Embedding. Then you will see the embedding settings. Ergo, no font editor needed.

Many thanks for that, koeiekat

The font name, though two separate words, is defined as one word but with two capitals (just to make life easy!): JennaSue

There is often a difference between the font name and the font-file name as toto already explained. In the css you must refer to the file-name.

Thanks, and would you CSS it like this:

@font-face {
font_family: JennaSue;
src: url("http://www.mysite.com/fonts/JennaSue.eot" ;
src: url("http://www.mysite.com/fonts/JennaSue.woff" ;
src: url("http://www.mysite.com/fonts/JennaSue.ttf" ;
}

Thanks for your advice!

Steve

Dagnabit, (spits tobacco juice), that there must be one of them newfangled ino-ervations they done put in that old new Windders I heard talk about. Run and tell yer Ma. She's in the feed shed, chattin' up on her AOL.

@SteveHi Are you referring to this font http://www.dafont.com/jenna-sue.font ? If that's the font, download this http://cjoint.com/14oc/DJlfgwacN55.htm Cut and paste the CSS code into your CSS file or HTML. Place the fonts in the folder where you want them to be. Set the correct path to the font in your @font-face declarations. Do not change anything else in the CSS that came with the web font. Make sure that references to that font in your other CSS declarations is the same as that in the font-family declared in the CSS code that you cut and pasted.

If this doesn't work, there must be something that you are doing wrong To check unpack the ZIP, do not touch anything and open jennasue-demo.html. If the demo does not work, there is something else that is causing your problem.

If you've just read the specs on that link...

http://lmgtfy.com/?q=windows+font+properties+extension

Thank you toto@k22

I have downloaded the font and CSS and uploaded both the font and CSS. The CSS didn't work, so I made a couple of variations (such as including a real Web address for src), and that didn't work, either.

I am beginning to think this is a bigger issue and have contacted my Web hosting service.

Thanks again!

If you unpacked the ZIP you downloaded to somewhere in your hard disk, double click on jennasue-demo.html and you would see something like this




Run the demo from your hard disk and see if it works.

If you are willing to show your CSS, I'd like to have a look. The problem might be somewhere there.

Hello

I decided to remove the Jenna Sue font from my Windows folder so that I could see if the font worked on a Web page for someone who did not have the font installed. I uploaded the font to my font folder on my server, and in my HTML page I tried many different combinations including:


h1.title{
font-family: 'JennaSue';
color: #ffffff;
float: left;
margin-left: 80px;
margin-top:10px;
display: inline-block;
font-size: 24px;
}


/*@font-face {
font-family: Jenna Sue;
src: url('../fonts/JennaSue-webfont.eot');
src: url('../fonts/JennaSue-webfont.woff');
src: url('../fonts/JennaSue-webfont.ttf');
local("Jenna Sue"),
}*/


/*@font-face {
font-family: Jenna Sue;
src: url('..New1/fonts/JennaSue-webfont.eot');
src: url('..New1/fonts/JennaSue-webfont.woff');
src: url('..New1/fonts/JennaSue-webfont.ttf');
local("Jenna Sue"),
}*/


/*@font-face {
font-family: 'jenna_sueregular';
src: url('jennasue.eot');
src: url('http://www.mysite.com/New1/fonts/jennasue.eot?#iefix') format('embedded-opentype'), url('http://www.mysite.com/New1/fonts/jennasue.woff2') format('woff2'),
url('http://www.mysite.com/New1/fonts/jennasue.woff') format('woff'), url('http://www.mysite.com/New1/fonts/jennasue.ttf') format('truetype'), url('http://www.mysite.com/New1/fonts/jennasue.svg#jenna_sueregular') format('svg');
font-weight: normal;
font-style: normal;
}*/


/*@font-face {
font-family: 'jenna_sueregular';
src: url('jennasue.eot');
src: url(http://www.mysite.com/New1/fonts/jennasue.eot?#iefix) format('embedded-opentype'), url(http://www.mysite.com/New1/fonts/jennasue.woff2) format('woff2'),
url(http://www.mysite.com/New1/fonts/jennasue.woff) format('woff'), url(http://www.mysite.com/New1/fonts/jennasue.ttf) format('truetype'), url(http://www.mysite.com/New1/fonts/jennasue.svg#jenna_sueregular) format('svg');
font-weight: normal;
font-style: normal;
}*/


/*@font-face {
font-family: 'jenna_sueregular';
src: url('jennasue.eot');
src: url('jennasue.eot?#iefix') format('embedded-opentype'), url('jennasue.woff2') format('woff2'),
url('jennasue.woff') format('woff'), url('jennasue.ttf') format('truetype'), url('jennasue.svg#jenna_sueregular') format('svg');
font-weight: normal;
font-style: normal;
}*/


/*@font-face {
font-family: "Jenna Sue";
src: url('/New1/fonts/JennaSue.eot');
src:url('/New1/fonts/JennaSue.woff');
src: local("Jenna Sue"), url('/New1/fonts/JennaSue.ttf');
}*/

/*
@font-face {
font-family: 'JennaSue';
src: url(JennaSue.eot);
src: url(JennaSue.eot?#iefix) format(embedded-opentype), url(JennaSue.woff) format('woff'), url(JennaSue.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}*/


/*h1.title{
font-family: 'JennaSue';
font-family: JennaSue, Arial, Serif;
color: #E93AE7;
/*float: left;*/
margin-left: 250px;
margin-top:30px;
display: inline-block;
font-size: 400%;
}*/


/*h1.title{
font-family: 'jenna_sueregular';
font-family: Jenna Sue, Arial, Serif;
color: #E93AE7;
/*float: left;*/
margin-left: 250px;
margin-top:30px;
display: inline-block;
font-size: 400%;
}*/


/*@font-face {
font-family: Jenna Sue;
src: url('../fonts/JennaSue-webfont.eot');
src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');
}*/

/*@font-face {
font-family: 'jenna_sueregular';
src: url('http://www.mysite.com/New1/fonts/jennasue.eot');

src: url('jennasue.eot?#iefix') format('embedded-opentype'),
url('http://www.mysite.com/New1/fonts/jennasue.woff2') format('woff2'),
url('http://www.mysite.com/New1/fonts/jennasue.woff') format('woff'),
url('http://www.mysite.com/New1/fonts/jennasue.ttf') format('truetype'),
url('http://www.mysite.com/New1/fonts/jennasue.svg#jenna_sueregular') format('svg');
font-weight: normal;
font-style: normal;
}*/

/*@font-face {

font-family: 'jenna_sueregular';
src: url(http://www.mysite.com/New1/fonts/jennasue.eot);
src: url(jennasue.eot?#iefix') format('embedded-opentype),
url(http://www.mysite.com/New1/fonts/jennasue.woff2) format('woff2'),
url(http://www.mysite.com/New1/fonts/jennasue.woff) format('woff'),
url(http://www.mysite.com/New1/fonts/jennasue.ttf) format('truetype'),
url(http://www.mysite.com/New1/fonts/jennasue.svg#jenna_sueregular) format('svg');
font-weight: normal;
font-style: normal;
}*/

/*@font-face {
font-family: 'jenna_sueregular';
src: url(http://www.mysite.com/New1/fonts/'jennasue.eot');
src: url(jennasue.eot?#iefix') format('embedded-opentype),
url(http://www.mysite.com/New1/fonts/'jennasue.woff2') format('woff2'),
url(http://www.mysite.com/New1/fonts/'jennasue.woff') format('woff'),
url(http://www.mysite.com/New1/fonts/'jennasue.ttf') format('truetype'),
url(http://www.mysite.com/New1/fonts/jennasue.svg#jenna_sueregular) format('svg');
font-weight: normal;
font-style: normal;
}*/

The font is not a problem if you have it installed in the font folder of Windows. The real name of the font (ttf) is: JennaSue. That is, one word, two capital letters, and no quotation marks. Feel free to use any of those @fonts above. But I could not get it to work on a Web page without the JennaSue font in my Windows folder: that means that nobody would see it online and, eventually, I abandoned the idea of using the font.

Next time, I will probably email the author/creator of the font and ask for the correct script.

Steve

If your @font-face declarations in your real CSS appear exactly like the ones you posted, I am not surprised why the font does not show. You enclosed your @font-face in /* and */. That is the cause of all your problem because that tells the browser to ignore everything between /* and */. That means you do not have a declared @font-face and will rely on the visitor having the font installed, which will likely not be the case. The only working CSS declaration there is the first h1.title

Suggestions: Use a full path, like your http://www.mysite.com/New1/fonts/jennasue.woff to be avoid complications. Also use all lowercase folder and file names to avoid problems in case your webserver is case sensitive. I strongly suggest that you look for a CSS validator and check your CSS for errors there.

No.

I only commented the code out AFTER I had tried it. Then I moved on to the next possibility. When that didn't work, I commented it out.

Send me your real CSS to to22to at gmail dot com or better the URL of the page where the font is used.

It is used here:

http://www.bayingwolf.com/DimaWeb/index3.asp

isn't this picture what we're supposed to see ? i screenshot it. Don't have the font on my pc.
=> http://i.imgur.com/hvXihDd.png