12 replies [Last post]
DKY
Offline
newbie
Last seen: 17 years 46 weeks ago
Joined: 2003-08-01
Posts: 4
Points: 0

Hello, I'm curious about getting my ttf to link in the css thus showing everyone the font whether they have it installed or not. I found a few places that show how to do this, but they're either not explanitive, or they're in another language. here's what I got so far.

<style type="text/css">
 @font-face { font-family:oet; src:url(http://www.mywebsite.com/OLDENGL.TTF); }
</style>

<font color="#000000" size="1" face="oet">$data->{'POSTER'}->{'MEMBER_NAME'}</font>

BTW, this is for an ikonboard, which might be part of the problem, but in order to be sure of that, I need to make sure I'm doing things correctly here. Anyone see anything wrong with this coding? It works as far as color changing, and size, but its just not calling up the ttf file. Do I need something other than font-family:oet? is it supposed to be something else, like the full name of the file? or can I just make something up there. Is it missing quotes? I dont get it, ANY help on this would be greatly appreciated.

TIA
DKY :?

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 14 years 5 days ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Hmm, don't think so

To my knowledge, albeit limited, that function doesn't exist. I googled 'css ttf' and didn't see anything in the first 20 hits to support your suggestion.

If you have the links to the sites you mentioned, could you please post them? I'm curious...

I've seen some stuff in the past that will display fonts but it required proprietary scripting and installation by the users. (BitStream is one example)[/url]

Diplomacy is the art of letting someone have your way

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 14 years 5 days ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

TTF link in css

A little more research turned up some info from w3c; what you're asking about is called WebFonts, and it appears to be scheduled for CSS3.

Diplomacy is the art of letting someone have your way

Anonymous
Anonymous's picture
Guru

TTF link in css

http://www.codephobia.com/tutorials/view.php3?idnum=6&pagenum=2
http://www.learn2design.net/code/css.htm
http://www.physik.uni-ulm.de/theo/selfhtml_7.0/tdcb.htm

I used msn to find those, wonder why google didnt pull any up. Oh well, the second one, you need to scroll down a bit, and the third one is another language.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 18 years 13 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

TTF link in css

Right on KnightWolf.

What a ton of people don't know, is that embedding fonts into your page via CSS has been around since the very incarnation of the spec, but no(?) user agents that I know of support it.

By the time CSS3 is well supported, Safari 4.0 and Mac OS 10.6 will be out. CSS is something like 6 years old, and some CSS1 properites STILL don't work in the NEWEST of browsers.

But I'm still looking forward to rounded corners, nonetheless Wink

-Mike

</twocents>

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 14 years 5 days ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

TTF link in css

You can include me in that ton of people... You'd think with the TrueType specs being in place for so many years that WebFonts is something that should already be supported... Oh well, I'm not holding my breath

Thanks for the info DJS

Diplomacy is the art of letting someone have your way

DKY
Offline
newbie
Last seen: 17 years 46 weeks ago
Joined: 2003-08-01
Posts: 4
Points: 0

TTF link in css

well, I'm using IE 6, and I can get it to work with other fonts...at least it seems like it works, but I can't figure out how to embed it in this ikonboard. (and dont tell me to go ask the people at ikonboard, I've tried that Laughing out loud ) any pointers? what browsers does this work in?

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 14 years 5 days ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

TTF link in css

Quote:
at least it seems like it works
Can we see a sample of what you already have working?

I might be way off on this, but if you've only checked your site on your computer (with the extra fonts installed) then it isn't really working like you think. The fact that the font is installed on your pc allows IE6 to display it in that font, but it won't work for anyone else who doesn't have that font. A quick solution might seem to be a download link and installation instructions on your site, but I don't recommend it- many have tried, and I suspect almost all have failed.

I spent quite a bit of time looking for info on just how much of CSS3 IE6 supports (I didn't find much- anyone?) but even if it does work in IE6 are you willing to rule out the rest of your users with different/ older browsers? No rhetoric intended Smile -occasionally a situation allows you to only have to support one browser version.

Diplomacy is the art of letting someone have your way

DKY
Offline
newbie
Last seen: 17 years 46 weeks ago
Joined: 2003-08-01
Posts: 4
Points: 0

TTF link in css

you're right, I tried it with a font that I didnt have installed, and it doesnt work. I thought since it was working by calling from a url, then it must be working. So, as of now, there's no way to do this then? I wonder what browsers support css3, if any?

davidduke
Offline
Regular
England, UK
Last seen: 16 years 34 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

It works!

IT WORKED!
I have used the following CSS:

@font-face { font-family: Vinegar; src: url(http://www.4bit.co.uk/testing/design01/vinegar.ttf); }
h3 {
	font-family: Vinegar, "Times New Roman", Times, serif;
}

And the font is NOT installed on my system, and this font display correctly on both Firefox 1.x, Opera 8 and IE 5.0+!!!

Hopes this opens up the possibilities for designs, i know it has for me!

from
David Duke

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 14 years 5 days ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Linkage?

I was going to ask for a link, but I presume it's http://www.4bit.co.uk/testing/design01 . How about a screenshot from your machine (since I don't know what vinegar should look like)?

Diplomacy is the art of letting someone have your way

Anonymous
Anonymous's picture
Guru

TTF link in css

Doesn't work on this end. Neither the link KnightWolfJK mentioned nor my own trials.

From Eric Meyer's "Cascading Style Sheets the definitive guide":

Quote:
CSS2 introduced a way to exert much greater control over font matching though an @font-face rule. Since no web browsers had fully implemented this as of spring 2003, @font-face was removed from CSS2.1...

DKY
Offline
newbie
Last seen: 17 years 46 weeks ago
Joined: 2003-08-01
Posts: 4
Points: 0

TTF link in css

Yeah, doesn't work for me either. I set up my css to look like so on an external css file.

#Contact_Header { font-size:16px; font-weight:bold; font-family: Vinegar; src: url(http://www.4bit.co.uk/testing/design01/vinegar.ttf); text-decoration: none; color : #000000 }

No go, unless I'm doing something wrong here. Using IE v. 6