Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Downloadable fonts, CSS help

[Tom_Spencer]

I've been wanting to use a particular font on my webpage but it is a custom font that very few people will have in .TTF format.

The font appears to be downloading successfully but then does not display.

I used Microsoft WEFT to convert the TTF to .eot

In my <style> element i have the following code:

@font-face {
font-family: "Psycho Poetry";
font-style: normal;
font-weight: normal;
src: url(http://kill.it/killit/fonts/PSYCHOPO.eot);
}


i then use:

font-family: "Psycho Poetry", verdana, ......., sans-serif; for the relevent part of the page in the style sheet.

When the page is accessed it will display with verdana.
Has anyone tried this before?
Have I missed something?
Could it be a problem with conversion to .eot?

Any help will be greatly appreciated.

[rrdega]

...not sure what eot is... I'll have to look that one up!

Personally, unless you're talk'n the whole page (in which case, I'd rethink the use of the font) I would burn/use an image with the artsy font.


[edit] In case I'm not the only ignoramus here: EOT Files Explained

[rrdega]

Ummm.... Is there a chance that your font's source URL is incorrect? I get a Not Found when I try to access it.

[Tom_Spencer]

The source URL was right, out of interest i copied the file to have capitals in the extension ie. PSYCHOPO.EOT and changed the path in the @font-face to

http://kill.it/killit/fonts/PSYCHOPO.EOT

It now downloads successfully.

I have no idea why the capitals made a difference, is this something I should have known about or completely random?

[rrdega]

Well, the issue was probably in the fact that Windows is not case-sensitive, where-as Unix/Linux is.

Assuming you are hosted with on a *nix server, and you are doing your development on Windows, it is always best to try and follow a standard naming convention.

A lot of people always use all lowercase for naming/referencing files. I personally, take a bit more risk, and follow the standard Java-type conventions, where the files will always start with a lowercase first letter, no spaces, underscores, or hyphens, and capitalize each distinct word there-in. i.e., webDesign.php, newReply.php, etc. I prefer this, as it tends to make the filenames more readible... IMHO

-Bob

[ph33r]

yo, yer code looks alot like mine

taken from the blood spatter test:
http //xero.nu/egobrain

<STYLE>@font-face {
font-family: bloodspatterz;
src: url(bloodspatterz.eot);
}
body {overflow-x: hidden}
.blood {FONT-SIZE: 195px; FONT-FAMILY: bloodspatterz; FILTER: alpha(opacity=95); -moz-opacity:95%;}
</STYLE>

when yew made the .eot w/ microsoft WEFT are ywe sure that yew used the correct url of yer www server?

oh yeah, also WEFT fonts dont work on yew system localy, they must be on a webserver.

[war59312]

Web fonts only work with IE right?

See:

http://www.jsworkshop.com/dhtml/list19-1.html

Only works in IE. So firefox dispalys normal font for example.

How about making it work in all browser. Guess you have to make the user download it manually? What is the best method if I got this right?

Thanks,
Will