29 replies [Last post]
nigelj
Offline
newbie
Last seen: 13 years 50 weeks ago
Joined: 2005-12-30
Posts: 5
Points: 0

Hi,

I just found this site/forum, and Tony's script for dynamic user prefs (http://www.csscreator.com/generator/userpref.php).

What I'd like to know is...is there a way to use (with the above script) a ttf font that resides inb a folder on the server, and isn't installed on the client's machines.

I've tried various combinations of @font-face in the head of the document where the script is called from, and using my font-name in the function, but this doesn't work.

Cheers & happy new year!

Nige

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

Here are two suggestions:

http://www.mikeindustries.com/blog/archive/2004/08/sifr

and

http://www.alistapart.com/articles/dynatext

I've used both in the past. I like the second choice the best.

It is active on my homepage right now (on the article titles).
http://www.imaginekitty.com/2005/12/27/30/ow-my-bandwidth-is-clogged/

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Using non-installed ttf fonts

Triumph wrote:
It is active on my homepage right now (on the article titles).
http://www.imaginekitty.com/2005/12/27/30/ow-my-bandwidth-is-clogged/

Are they s'posed to have borders around each of the words?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

Tyssen wrote:
Triumph wrote:
It is active on my homepage right now (on the article titles).
http://www.imaginekitty.com/2005/12/27/30/ow-my-bandwidth-is-clogged/

Are they s'posed to have borders around each of the words?
No. *sigh* I forgot. Laughing out loud

I feel so dumb. Wink

Fixed, thanks for the heads up.

nigelj
Offline
newbie
Last seen: 13 years 50 weeks ago
Joined: 2005-12-30
Posts: 5
Points: 0

Using non-installed ttf fonts

Triumph wrote:
Here are two suggestions:

http://www.mikeindustries.com/blog/archive/2004/08/sifr

and

http://www.alistapart.com/articles/dynatext

I've used both in the past. I like the second choice the best.

It is active on my homepage right now (on the article titles).
http://www.imaginekitty.com/2005/12/27/30/ow-my-bandwidth-is-clogged/

Thanks...but I don't think this is what I want...I'll explain a bit better...please tell me if what you have suggested fits this...

I want to offer users drop-downs for font size and font family so they can select the look for the main (paragraph) text. I should have said I'm building a site using the typo3 CMS. I already use sifr for custom page and section headers.

Tony's dynamic pref script will give me the options I want to include on the page, but instead of "serif", sans-serif, monospace, default etc." I want to offer specific font faces. If a user doesn't have one of them installed on their system, the selection won't do anything...that's why I want to know if there's any way to bring in a ttf font from a file lying on the server, so a user who doesn't have it can still view the page in this style.

I've tried doing this so far...

In the page header...

<style type="text/css" MEDIA="screen, print">
<--
  @font-face {
    font-family: xxx-font-name-xxx;
    src: url("path_to_ttf_file");
-->
}
</style>

then in the preferences.js file...

"<option value= 'font-family:\"xxx-font-name-xxx\"'>Font Name</option>"+

But this doesn't work!...I'd like to know if what I'm trying to do is possible at all, and is the above syntax wrong, or am I wasting my time altogether!?

I've also tried to implement the js that mikeindustries.com uses for the readability settings (this is exactly what I want to do), but I cannot get it to work. I think that's because some of the script is part of the mint installation, and I don't have it!

Does that make more sense now?

Nige

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

I removed the replacement script from my site due to the fonts being incomplete. If anyone wants to sample the replacment technique either view it on a list apart or ask me to whip up an example.

nigelj
Offline
newbie
Last seen: 13 years 50 weeks ago
Joined: 2005-12-30
Posts: 5
Points: 0

Using non-installed ttf fonts

Triumph wrote:
... or ask me to whip up an example.

I'd be very grateful if you could do that for me.

Happy New Year!

Nige

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

nigelj wrote:
Triumph wrote:
... or ask me to whip up an example.
I'd be very grateful if you could do that for me.
It's just the same technique as before.

http://www.imaginekitty.com/textreplace/

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Using non-installed ttf fonts

Triumph wrote:
nigelj wrote:
Triumph wrote:
... or ask me to whip up an example.
I'd be very grateful if you could do that for me.
It's just the same technique as before.

http://www.imaginekitty.com/textreplace/
It's like watching a typewriter when the page first loads. Laughing out loud

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

Tyssen wrote:
It's like watching a typewriter when the page first loads. Laughing out loud
Yeah, I set the script to not cache images. Laughing out loud

It's not meant to do that much. It's just for headers and headlines and such. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 23 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Using non-installed ttf fonts

The expected usage is

 
<style type="text/css" media="screen, print"> 
      @font-face { 
        font-family: "Robson Celtic"; 
        src: url("http://site/fonts/rob-celt") 
      } 
      h1 { font-family: "Robson Celtic", serif } 
    </style>

where if 'Robson Celtic' did not exist on the client machine, it would be downloaded from the src: property value. The downloaded font would only be available to the client and to no other application.

I don't believe the required two clients implemented @font-face, and it was dropped from css2.1 which represents current practice.

It is being discussed in the css3 working draft in the font and svg modules.

For the time being, you're pretty much limited to image replacement techniques.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Using non-installed ttf fonts

Do you know which browsers support @font-face. A quick google didn't show up much besides IE should.

twinklerip
twinklerip's picture
Offline
Regular
Bangladesh
Last seen: 13 years 49 weeks ago
Bangladesh
Timezone: GMT+6
Joined: 2006-01-01
Posts: 29
Points: 0

Using non-installed ttf fonts

hey, what bout .eot/.prf n the prob with IE and NN? can i use fonts without embedding them? .ttf as is?? n it'll work in both IE and NN?? oh, i guess not, u r wirking on it... if u find a soln, plz let me know....

Dead & Buried

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

twinklerip wrote:
hey, what bout .eot/.prf n the prob with IE and NN? can i use fonts without embedding them? .ttf as is?? n it'll work in both IE and NN?? oh, i guess not, u r wirking on it... if u find a soln, plz let me know....
:? Could you please translate that?

twinklerip
twinklerip's picture
Offline
Regular
Bangladesh
Last seen: 13 years 49 weeks ago
Bangladesh
Timezone: GMT+6
Joined: 2006-01-01
Posts: 29
Points: 0

Using non-installed ttf fonts

i was talking about dynamic font. Embebed Open Type (EOT) fonts are used for Internet Explorer, and Portable Font Resource (PRF) fonts are used for Netscape Navigator. PRF can be used with IE with the help of an Active X program.
http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479401

there are softwares that can create PRF and EOT from TTF. look for "Dynamic fonts" in the following page:

http://jeff.cs.mcgill.ca/~luc/ttsoftware.html

i was hoping that, we could use TTFs directly from server, without converting them to EOT or PRF. if u guys are working on that and if u find a way to do that let me know.

Dead & Buried

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

twinklerip wrote:
i was talking about dynamic font. Embebed Open Type (EOT) fonts are used for Internet Explorer, and Portable Font Resource (PRF)
I was referring to the juviespeak not the techspeak.

twinklerip
twinklerip's picture
Offline
Regular
Bangladesh
Last seen: 13 years 49 weeks ago
Bangladesh
Timezone: GMT+6
Joined: 2006-01-01
Posts: 29
Points: 0

Using non-installed ttf fonts

http://www.imaginekitty.com/textreplace/

Quote:
Namaste, kya aap ke sa hai? Triumph the comic dog. Om namo sarayaniya. Aum. Namaste, kya aap ke sa hai?

Namste, aap kysa hai? (alternate spellings cud be 'kaisa' & 'hain')
donno what 'sarayaniya' is. but they use 'om namo shiva' a lot. n there's this other thing 'Om Namo Narayanaya'.

Dead & Buried

twinklerip
twinklerip's picture
Offline
Regular
Bangladesh
Last seen: 13 years 49 weeks ago
Bangladesh
Timezone: GMT+6
Joined: 2006-01-01
Posts: 29
Points: 0

Using non-installed ttf fonts

Triumph wrote:
twinklerip wrote:
i was talking about dynamic font. Embebed Open Type (EOT) fonts are used for Internet Explorer, and Portable Font Resource (PRF)
I was referring to the juviespeak not the techspeak.

well, i am young. 22 years young. Laughing out loud

Dead & Buried

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

Quote:
Namaste, kya aap ke sa hai? Triumph the comic dog. Om namo sarayaniya. Aum. Namaste, kya aap ke sa hai?

Namste, aap kysa hai? (alternate spellings cud be 'kaisa' & 'hain')
donno what 'sarayaniya' is. but they use 'om namo shiva' a lot. n there's this other thing 'Om Namo Narayanaya'.Laughing out loud Yeah, I was trying to get the text correct without switching my keyboard layout. didn't work at all.

twinklerip
twinklerip's picture
Offline
Regular
Bangladesh
Last seen: 13 years 49 weeks ago
Bangladesh
Timezone: GMT+6
Joined: 2006-01-01
Posts: 29
Points: 0

Using non-installed ttf fonts

Namaste* sorry, typo.

Dead & Buried

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 23 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Using non-installed ttf fonts

Chris..S wrote:
Do you know which browsers support @font-face. A quick google didn't show up much besides IE should.

I think IE was/is the only one, but I don't think they do it by the book. As I think twinkle? mentioned, NN had a non-standard variation.

From personal experience, I'm not in love with the idea. I had a site feed me a font that must have run damn-near a megabyte. I was on a dial-up connection at the time. Evil I have yet to see a font that added enough to the viewing experience to be worth a plugged nickel—nor even 10sec. additional dl time.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

kk5st wrote:
I have yet to see a font that added enough to the viewing experience to be worth a plugged nickel—nor even 10sec. additional dl time.
Hmmm. I think I am going to agree (even though I sound hypocritical since I use the ALA text replacement technique once in a while). It seems that those new to css (and even plain vanilla html) want absolute (pun) power over what the user sees no matter the end users choices. It's my site darn it and you'll look at it how I want you to look at it!

One thing, I think, you give up as you mature in web design is being a control freak. Especially when you begin to consider accessibility. I just realized that when you said that Gary. It should be more about making your site usable than showing off. I don't think using a specific font is going to accomplish that in any way.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Using non-installed ttf fonts

Triumph wrote:
kk5st wrote:
One thing, I think, you give up as you mature in web design is being a control freak.

I think you're right there. There are huge benefits:
- speed (to develop & due to lower page weights)
- maintainability
- simplicity
- (and as you mention) accessibility

Anonymous
Anonymous's picture
Guru

Using non-installed ttf fonts

Chris..S wrote:
I think you're right there. There are huge benefits:
- speed (to develop & due to lower page weights)
- maintainability
- simplicity
- (and as you mention) accessibility
The basis of all the others is simplicity. CSS is all about simplicity. That's my mantra.

MattyUK
Offline
Regular
Last seen: 15 years 34 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Using non-installed ttf fonts

Hi

I was about to post a similar question and found this topic.

Quote:
Do you know which browsers support @font-face. A quick google didn't show up much besides IE should.

Chris..S I found this:
http://www.csscreator.com/attributes/properties/@font-face
I suspect it was added after your post. I don't know how accurate it is.

I have a choice in terms of presentation. A client insists on a script font to display elements in the page (menu, special message) despite having the downside explained. At this point it is thanks to the graphic designer who should have known better than to base his designs so heavily around it.

Not wanting to walk away from the business and equally not wanting to turn the majority of the page into graphics, we have agreed to support them via CSS2 @font-face method.

So:
I have specified rollover fonts for use if the script font isn't installed locally.
For those that have them locally I don't want to upset their usage which is seemless as this point.

For those that don't have the font I want to place the TTF files on the server and use the @font-face CSS2 rule to get them downloaded and displayed in supporting browsers.

Those without them installed locally or supporting browsers are deemed acceptable casualties by the client. (sigh..)

I am using the following gleaned from the specs and googled tutorials.

@font-face {
	font-family: "Bickley Script";
	src: url("http://adomain.com/fonts/BicklySc.ttf");
	font-style: normal, italic, bold;
}
div#menu, div#message {
	font-family: "Bickley Script", "Lucida Handwriting", "Comic Sans MS", "Trebuchet MS", Verdana;
}

I have a few questions:
1.Do I need the .ttf in the src url line? Examples I find don't contain it but I can't see why this wouldn't generate a 404 error.
2.How can I specify a second font in the same @font-face segment or do I need a new @font-face segment? I suspect I need a new one.
3.Will specifying the font src in the @font-face declaration upset those that have it locally? By that I mean I'd rather the browser use the local ones by the same name rather than download anew.
4.I see lots of other aspects and properties that can be specified for it, such as:
5.Do I need to specify these. How on earth do I go about finding out what values are correct for a specific font?
6.Can I assume that if the MS WEFT (http://www.microsoft.com/typography/web/embedding/weft3/) tool is prepared to embed the font that it is available to use online? I thought it did a good job of checking font licenses. (Don't worry I only use WEFT for this checking.) I don't trust the designer to have used royalty free public domain fonts and I want to be sure.

The tutorial I've been reading is: http://www.richinstyle.com/guides/fontface2.html#atfontface
The CSS will be in a page set for standards mode, not using a <?xml declaration.

I realize that some of these questions are outside the scope of this forum (licenses etc) but anyones experience or thoughts are welcome at this point.

MattyUK

Carrots encourage. Sticks enforce. Which is needed here?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Using non-installed ttf fonts

afaik you don't use a ttf file but a specially compressed version. I seem to remember posting a link somewhere.

MSDN has more details. @font-face | embedding fonts

MattyUK
Offline
Regular
Last seen: 15 years 34 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Using non-installed ttf fonts

Thanks Chris.

Ok so its EOT files for MS IE. Easy enough to sort out IE with the eot file only using a conditional comment.

What of firefox and Opera?

Anyone know of a confirmed way to embed fonts in FireFox or Opera without using images/flash?

Ideally the method/software needs to be free of course.

Thanks in advance.

MattyUK

Carrots encourage. Sticks enforce. Which is needed here?

wmike1503
Offline
newbie
UK
Last seen: 12 years 35 weeks ago
UK
Joined: 2004-12-04
Posts: 5
Points: 0

WEFT 3

I've just used WEFT 3 on a site I'm working on - the embedded font works in IE and Firefox - so far!

http://www.wrightplace.co.uk/barnhouse

Cheers!

Mike

Triumph (not verified)
Anonymous's picture
Guru

wmike1503 wrote:I've just

wmike1503 wrote:
I've just used WEFT 3 on a site I'm working on - the embedded font works in IE and Firefox - so far!

http://www.wrightplace.co.uk/barnhouse
There are two things you must realize.

  • The last post before yours is a year old
  • No one can see a font that is on your computer src: url(file:///E:\My documents\WrightPlaceConsultingDevelopmentCopy\barnhouse\fonts\VLADIMI0.eot);

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 23 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Actually, it doesn't. When

Actually, it doesn't. When you specify 'rage italic', it works only if the font already exists on the client machine. On machines that don't have that font, the UA's default font is used. @font-face is no longer a part of css, as it lacks support from the necessary two or more major browsers.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.