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/

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

No. *sigh* I forgot.

I feel so dumb.

Fixed, thanks for the heads up.

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

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.

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

Happy New Year!

Nige

It's just the same technique as before.

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

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

Yeah, I set the script to not cache images.

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

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

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

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?

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.

I was referring to the juviespeak not the techspeak.

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

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'.

well, i am young. 22 years young.

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'. Yeah, I was trying to get the text correct without switching my keyboard layout. didn't work at all.

Namaste* sorry, typo.

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. 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

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.

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.

Hi

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

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

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

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

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

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);

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