Fonts in style-sheets

[reafro]

Hi, everybody,

When building a website I had the following problem:

For some parts of the text used on the site I used the trueTypeFont MTCORSVA.TTF (Monotype Corsiva Standard).
When viewing the designed pages on my own computer I had no problems (of course :D ).

When viewing the same page on a different computer, on which this font wasn't installed, naturally the text looked complete diferent, because it was sustituted by e.g. Arial.

What is the easiest way to make sure all text looks as I want it to on no matter what computer, and no matter if the font isn't installed? I already looked at www.truedoc.com and at Microsoft, but that wasn't the solution I am looking for. Truedoc doesn't use Monotype Corsiva, and the solution of Microsoft (WEFT3) is only applicable for IE-users. And as we know, there are a lot more browsers....

Who can help me????? :confused: :confused: :confused:

Rob.

[pascal]

Can't you upload that file to your server?

[azlatin2000]

Try This:

Upload the font file to the server and then link to it in the style tag like this:

@font url("fonturl")

Remember that this has to be the first thing in the style tag or it won't work.

Tell me if it worked.

[reafro]

@font url("fonturl")



With "fonturl" you mean the font name, or do you mean the filename for the TTF??

(maybe a silly question, but to this I'm rather new. The best way is to learn on the job, I think!)

Rob.

[reafro]

Hi, Pascal, azlatin2000,

I tried both your suggestions, but alas, it didn't work :mad:

Just uploading didn't have any result; all kinds of variations of the style tag sometimes changed the font to Arial Bold and normal, but not to the desired font. So if you have another suggestion????

Rob.

[azlatin2000]

I meant the filename.

Try this:

<STYLE TYPE="text/css">
<!--
@font-face {
src: url(font.ttf);
}
-->
</STYLE>

also Try These sites:

http://www.w3.org/TR/REC-CSS1

http://www.w3.org/TR/REC-CSS2/fonts.html

http://forums.devshed.com/archive/1/2001/8/2/20319

[Daybreak_0]

Most people stick to the standard fonts.

If the font is only used for special headings, you could create a graphic, and use that instead.

MS do have a web embedding tool for fonts http://www.microsoft.com/typography/web/embedding/weft3/default.htm
but it only works for IE.

An old but good article here http://www.devshed.com/c/a/DHTML/Understanding-Embedded-Fonts/

BTW bitstream is not supported by FB, and possibly newer versions of Netscape.

Regards
Day

[DCElliott]

Fonts have to be specially packaged in WEFT to be used. I experimented with it once but it wasn't worth the hassle. what you need to do is find fonts that are similar to yours (unless it is something wild), and then give the fonts in descending order:
font-family:"my preferred",next, another, ... serif;

That gives you a bit of control over substitution.

DE

[Daybreak_0]

Originally posted by reafro
Hi, Pascal, azlatin2000,

I tried both your suggestions, but alas, it didn't work :mad:

Just uploading didn't have any result; all kinds of variations of the style tag sometimes changed the font to Arial Bold and normal, but not to the desired font. So if you have another suggestion????

Rob.

I like that

Also found this though

http://forums.devshed.com/archive/1/2003/9/3/83985

Whether Moz now supports it is a question still to be answered.

Regards
Day

[reafro]

It's starting to drive me nuts!!

I've visited all the suggested links, tried all the examples you all gave me (thank you for that, it's nice to have a couple of people who want to help someone on the other side of this globe! :thumbup: ) but still ITS DOESN'T WORK!!!!

AAAAAAAAARGH!

Then there is the problem of browser incompatibility. When using MS WEFT, Netscape users won't see what I want them to see. When using TrueDOC, I think (correct me if I'm wrong) IE-users won't benefit from it.
Is it possible to use both WEFT and TrueDOC in a style-sheet??

Other question for the same subject:
In the examples above the <STYLE>-tag is used frequently. This is (as far as I know) only for use in HTML-pages. When used in CSS, I only have to omit the <STYLE>-tag (ande the </STYLE>-tag of course) to have a functional "command-line"??

I hope we can find a solution for this problem!!

Rob.

[azlatin2000]

Yes to include it in a seperate .css file you must put the code between the <STYLE> tags in a seperate file.

For example: STYLE.CSS

Then put this into the <HEAD>:
<LINK REL="stylesheet" TYPE="text/css" HREF="STYLE.CSS">

[Daybreak_0]

Do not think there is anything you can do till all the browsers support all of CSS2 (which includes the font import) you may have to use a different more supported font or graphics.

Regards
Day

General Note: Remember that many fonts are proprietary property. You can't force someone to download a font, and in allowing them to do so you may also be legally liable.