The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Frederiek
post Feb 16 2012, 02:53 AM
Post #2


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
BalancedLineOut
post Feb 16 2012, 06:36 AM
Post #3


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 #4


🌟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 #5


🌟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
BalancedLineOut
post Feb 20 2012, 07:30 AM
Post #6


Newbie
*

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



QUOTE(pandy @ Feb 16 2012, 07:04 AM) *

Sigh. I wasn't THAT bad a word. Female dog. sad.gif


LOL. My biggest problem is that at my age memory is like marbles in a sieve. Things fall out all the time. lol. Once I become immersed in designing again, there no shortage of ways I can mess something up. LOL.

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

Posts in this topic
BalancedLineOut   How best to Force Unique font - Noob 101   Feb 15 2012, 02:39 PM
pandy   I guess I'm confiused as to where the specifi...   Feb 15 2012, 02:48 PM
BalancedLineOut   Haha... I had just bookmarked that site, and ha...   Feb 15 2012, 03:23 PM
BalancedLineOut   Well...hmmm... Not getting any love out of this e...   Feb 15 2012, 03:36 PM
pandy   Hmm, I haven't done this since IE was the only...   Feb 15 2012, 03:55 PM
BalancedLineOut   Hmm, I haven't done this since IE was the onl...   Feb 15 2012, 04:33 PM
pandy   <link rel="test" href="test.css...   Feb 15 2012, 04:36 PM
BalancedLineOut   There seems to be a 3rd step to the instructions t...   Feb 15 2012, 04:50 PM
pandy   Did you read Christian's post above? He spotte...   Feb 15 2012, 05:08 PM
pandy   Wait, I think there is one more mistake. You call ...   Feb 15 2012, 05:12 PM
BalancedLineOut   Wait, I think there is one more mistake. You call...   Feb 15 2012, 08:14 PM
BalancedLineOut   Well, I don't give up, but if I was ever drive...   Feb 15 2012, 09:06 PM
BalancedLineOut   Well. Isn't that just ducky. It works. Sor...   Feb 15 2012, 09:50 PM
Christian J   <link rel="test" href="test.css...   Feb 15 2012, 04:32 PM
BalancedLineOut   Oh yeah, I also get a message when I validate the ...   Feb 15 2012, 03:49 PM
Frederiek   You get the @font-face syntax from Font Squirrel i...   Feb 16 2012, 02:53 AM
pandy   All's well that ends well. Never even occurred...   Feb 16 2012, 05:26 AM
BalancedLineOut   @Frederiek Well in the end I had to use the source...   Feb 16 2012, 06:36 AM
pandy   It is. But CSS is a *beep*. ^_^   Feb 16 2012, 06:58 AM
pandy   Sigh. I wasn't THAT bad a word. Female dog. :...   Feb 16 2012, 07:04 AM
BalancedLineOut   Sigh. I wasn't THAT bad a word. Female dog. ...   Feb 20 2012, 07:30 AM
pandy   Actually, leaving DW and typing by hand might be t...   Feb 20 2012, 08:09 AM
Frederiek   I didn't have DW code the font, I directly had...   Feb 16 2012, 09:05 AM
Darin McGrew   Not at all unusual. I take notes in classes/lectur...   Feb 20 2012, 01:56 PM


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: 28th March 2024 - 09:18 AM