The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> How best to Force Unique font - Noob 101, @font-face not behaving
BalancedLineOut
post Feb 15 2012, 02:39 PM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



I remember a few years ago building a ebsite and specifying a unique font using the M/S WEFT tool. I want to force browsers to use a specific font again, and came across "@font-face". I used the online utility font-squirrel, and even after doing that, I can't get the unique font to load in my web page. The sample they provide works fine, so it has to be something I'm doing... or not doing.

I know this sounds really nasty, but I've not worked with CSS before this past weekend, although I can immediately see it's advantages, and I've created so very nice pages with it. I seem to be missing the boat on this font thing, something that should be relatively simple.

I guess I'm confiused as to where the specific pieces of code go... in the index.html or the sytle.css file. Non of the tutorials are clear on that, and assume more knowledge on the subject than I have. I've even gone back to the basics - since the site I was trying to apply this to was kind of busy with code - and started working fresh on new files. Still can't get the font to work....unless I load it as a system font,.

Thks for the read, and putting up with another noob.

S~
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2012, 02:48 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(BalancedLineOut @ Feb 15 2012, 08:39 PM) *

I guess I'm confiused as to where the specific pieces of code go... in the index.html or the sytle.css file. Non of the tutorials are clear on that,


Sure they are! smile.gif
http://htmlhelp.com/reference/css/style-html.html

Typically you want to use an external style sheet (the first option at the above page). If you want to used an embedded style block you need to repeat it in every page and that's no fun. The style attribute is even worse and not an option for this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 03:23 PM
Post #3


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



QUOTE
Sure they are! smile.gif
http://htmlhelp.com/reference/css/style-html.html

Typically you want to use an external style sheet (the first option at the above page). If you want to used an embedded style block you need to repeat it in every page and that's no fun. The style attribute is even worse and not an option for this.



Haha... I had just bookmarked that site, and hadn't started reading though it yet. I guess what I meant to say was none of the sites I had read at that time....were clear on that.

I will see how I do getting thoguh that one.

S~
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 03:36 PM
Post #4


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



Well...hmmm...

Not getting any love out of this exercise.

This is as far as I get.

IN the index.htm file I put

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="test" href="test.css" type="text/css" charset="utf-8" />
</head>



On the test.css file, it looks like this...

@font-face {
font-family: 'DistortiaRegular';
src: url('distorti-webfont.eot');
src: url('distorti-webfont.eot?#iefix') format('embedded-opentype'),
url('distorti-webfont.woff') format('woff'),
url('distorti-webfont.ttf') format('truetype'),
url('distorti-webfont.svg#DistortiaRegular') format('svg');
font-weight: normal;
font-style: normal;

}




.style2 {
font-family: distorti-webfont;
font-size: 18px;
font-style: normal;
font-weight: 400;
font-variant: normal;
color: #FF0000;
line-height: normal;
text-transform: none;
}


Text does not adopt the new font. Like I said, I must be missing something....and even though I don't like to have it that way, all the files for this test page are in the root of the site....until I get it working. Then I can tidy that up later.

This post has been edited by BalancedLineOut: Feb 15 2012, 03:38 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 03:49 PM
Post #5


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



Oh yeah, I also get a message when I validate the page that says:

The tag "link" has an XML style closing syntax for an empty element even though version "HTML20" is not an XML tag language. [HTML 4.0]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2012, 03:55 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Hmm, I haven't done this since IE was the only browser that supported it, but it looks right to me. Doesn't it work in any browser? I suppose you have double checked that the font files are uploaded and the URLs to them are correct?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 15 2012, 04:32 PM
Post #7


.
********

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



CODE
<link rel="test" href="test.css" type="text/css" charset="utf-8" />

The REL attribute value should be "stylesheet", not "test".

Don't know about proper @font-face syntax, or which browsers that support it today.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 04:33 PM
Post #8


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



QUOTE(pandy @ Feb 15 2012, 03:55 PM) *

Hmm, I haven't done this since IE was the only browser that supported it, but it looks right to me. Doesn't it work in any browser? I suppose you have double checked that the font files are uploaded and the URLs to them are correct?


It doesn't even work in Dreamweaver. If I open the backup site, and start my font manager and enable the font in question, it works fine in all it's glory. I can't count on everyone visiting my site having this font loaded, so I have to force this. My friend, who also dabbles in web stuff came over a few minuntes ago and he has a differnet version of Dreamweaver, which displays my pages a bit differently. I might have to upgrade from my older (pre-Adobe) version ...

And to answer your question whether the path to the files is correct, this page is still only local on my machine, and all files are in the root of the site, all the variations of the font that font -squirrel kicked out, css, everything.

Still plodding along...

S~

This post has been edited by BalancedLineOut: Feb 15 2012, 04:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2012, 04:36 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Feb 15 2012, 10:32 PM) *

CODE
<link rel="test" href="test.css" type="text/css" charset="utf-8" />

The REL attribute value should be "stylesheet", not "test".

Don't know about proper @font-face syntax, or which browsers that support it today.



Oops! Didn't look at the HTML. blush.gif That's probably it then.

I think all of them support it now. Probably started to work on it as soon as CSS 2.1 was launched. ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 04:50 PM
Post #10


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



There seems to be a 3rd step to the instructions that font-squirrel kicked out...


To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:


p { font-family: 'WebFont', Arial, sans-serif; }

I don't know where this is supposed to go....

The help finle from font-squirrel says this about my issue:

Fonts not showing in any browser

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

We can forget the .htaccess part right now, I think my problem is this linking in the .css file. Idon't know that I've done it right, or if I'm supposed to define a style or something. Time for a brain break and some supper....

S~

This post has been edited by BalancedLineOut: Feb 15 2012, 04:53 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2012, 05:08 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Did you read Christian's post above? He spotted the mistake I missed. That's likely your problem.

CODE

p { font-family: 'WebFont', Arial, sans-serif; }


That's probably just an example. It means make every P use WebFont. You can read about rules and selectors here:
http://htmlhelp.com/reference/css/structure.html

The CSS guide only covers CSS1, but I think it still probably is the best quick guide there is. Read and understand those few pages (ask if you don't!) and you are pretty much home. The rest is just looking up newer properties and how to use them. The basics remains the same.

The important bit in the code you have is this.
CODE
@font-face {
font-family: 'DistortiaRegular';
src: url('distorti-webfont.eot');
src: url('distorti-webfont.eot?#iefix') format('embedded-opentype'),
url('distorti-webfont.woff') format('woff'),
url('distorti-webfont.ttf') format('truetype'),
url('distorti-webfont.svg#DistortiaRegular') format('svg');
font-weight: normal;
font-style: normal;
}


That links your font files to the style sheet. After that you can use that font as you would any ordinary font and create your own rules with it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2012, 05:12 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Wait, I think there is one more mistake. You call the font-family DistortiaRegular

CODE
@font-face {
font-family: 'DistortiaRegular';
src: url('distorti-webfont.eot');
...
}



but when you use it you call it by the file name, not the font-family name.
CODE
.style2 {
font-family: distorti-webfont;
...
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 08:14 PM
Post #13


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



QUOTE(pandy @ Feb 15 2012, 05:12 PM) *

Wait, I think there is one more mistake. You call the font-family DistortiaRegular

CODE
@font-face {
font-family: 'DistortiaRegular';
src: url('distorti-webfont.eot');
...
}



but when you use it you call it by the file name, not the font-family name.
CODE
.style2 {
font-family: distorti-webfont;
...
}



Well, that was filling....supper I mean. Right. I looked at the details pointed out, and man, I must be dense. I'm taken all the references to DistoriaRegular (not something I chose) and changed them all to distori-webfont. THe samples I copied were right out of the Font-Squirrel html sample file.

I think I'm going back to square 1 with a new set of pages. Wish me luck.

S~
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 09:06 PM
Post #14


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



Well, I don't give up, but if I was ever driven to drink... this might do it.

Here is the code generated by FontSquirrel:

CODE
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 15, 2012 */


@font-face {
    font-family: 'DistortiaRegular';
    src: url('distorti-webfont.eot');
    src: url('distorti-webfont.eot?#iefix') format('embedded-opentype'),
         url('distorti-webfont.woff') format('woff'),
         url('distorti-webfont.ttf') format('truetype'),
         url('distorti-webfont.svg#DistortiaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


Notice it mentions DistortiaRegular twice. It also uses src: twice, example code I found elsewhere only uses src: once. Don't know if that makes a difference. Also, I had to create a style as a subset of the stylesheet. Text would adopt the attributes of size and colour, but the actual typeface is not changing.

So again, In the index.htm (or index.html - I've tried both) file I have this hunk of code:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

<style type="text/css">
.style1 {font-family: distorti-webfont}
<!--

-->
</style></head>

<body>
<div align="center"><span class="style1Copy style1">TEST 123456789 </span>
</div>
</body>
</html>




I tried changing the distorti-webfont referenced in style1 to DistoriaRegular, and when I do I lose formatting (colour and size).

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 15 2012, 09:50 PM
Post #15


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



Well. Isn't that just ducky.

It works.

Sort of.

Sort of not.


I've been sitting here baising "working" on the fact that I can't see the typeface change in Dreamweaver. I've been using Dreamweaver for years and it shows you just what you're doing.

Apparently not this time.

I was growing tired of failin, I even resorted to looking at the source code for the html sample taht came from Font-Squirrel. Copied it to my own files. Nothing.

Well.... nothing in Dreamweaver, but for some reason I was inspired to his F12 and preview in browser and blamo,there it is... the gawd awful test text I was looking for. So, I got it working, but not within the coding app. I guess I can fix that by turning it on as a local system font, after I see it working in a browser.


I don't have that much hair left to pull out... unsure.gif

S~
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 16 2012, 02:53 AM
Post #16


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You get the @font-face syntax from Font Squirrel inside stylesheet.css. Then have a look in the demo.html page and see how the font-family is called for BODY in an embedded style at the top of the page.

Since your font is DistortiaRegular, that's what you should use (font-family: DistortiaRegular) in your .style1 declaration, instead of "font-family: distorti-webfont".

As for DW, I have an old version too and it didn't even want to show a regular font (Verdana), when I had to make some pages with it. What I did was declare the font for all selectors embedded in the page itself. Only then it worked.

Mind you, I'm used to handcode HTML and CSS. I had never used DW before.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 16 2012, 05:26 AM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



All's well that ends well. Never even occurred to me that you only viewed it in DW. My advice to you - use real browsers (plural) for previewing. No one surfs with DW and what its viewer is capable of and not is of no interest. It's sad to get stuck for a reason like that. Learn from it and you will get something useful out of this exercise. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BalancedLineOut
post Feb 16 2012, 06:36 AM
Post #18


Newbie
*

Group: Members
Posts: 11
Joined: 15-February 12
Member No.: 16,487



@Frederiek
Well in the end I had to use the source code for the sample page provided by font-squirrel. Something in the code that was on the face of the document didn't add up, even after I figured out D/W was failing to show the font. All's well that ends well, I suppose.

@pandy Good point lesson learned. In my defense, I had previewed pages earlier in the session... I guess there were syntax errors still. After using D/W for as long as I have, it never occurred to me that it would fail to display a typeface inline. Actually, going back to the original page I had created using WEFT, D/W did display that font inline. Perhaps the difference is that I installed it as a system font to achieve the effect, and used WEFT to push the font out later. In this case, I already was aware of the font issue so I didn't install it as a system font. That' probably why D/W didn't display it. Complicates the validating procedure a bit in that I have to look at the files from another system that doesn't have the font in question on it.

And my son thought HTML was easy.

S~
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 16 2012, 06:58 AM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It is. But CSS is a *beep*. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 16 2012, 07:04 AM
Post #20


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Sigh. I wasn't THAT bad a word. Female dog. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:17 PM