Viewing non-standard fonts on the web.

[Daciana]

Ok, here's post #2, please give me a break, I'm new at this! I found a font on the internet that I wanted to use on my website. I downloaded it and have designated it in the markup for my pages. I can see it as the webpages are still localized on my computer. No one else can see the font as it should be though. I assume it's because I downloaded the font already and they haven't.Q: How can I ensure everyone else can view the font as it was intended without them having to download the font as well. When I first saw the font, I saw the sample as well, yet I didn't have the font downloaded as of yet. The font is called Morpheus Regular, a TTF.Here's the markup I have thus far and it's an internal style:h1, h2 {background-color:transparent; font-family:Morpheus Regular; text-align:center}h1 {font-size:300%}h2 {font-size:200%}p {font-family:Pegasus; font-size:18pt; margin-left:2cm; margin-top:1cm; margin-right:2cm}Also, Q: Should I find the % equivalent to the 18pt font-size specified for p to make it more user friendly? Web Quality Assurance: "If your website lacks features such as resizable fonts, images with proper text descriptions, and easy navigation, these people will not be able to access your information. Use an Adjustable Font Size. Use only relative font sizes, and let the user be able to use the browser menu (View - Text Size) to change the default text size. Am I understanding what "use only relative font sizes" means?

[PrateekSaxena]

Sorry, but it will have to be an image or a Flash file if you wanna display it!

[boen_robot]

Points (pt) are relative sizes too I think, scince they measure size on paper, without telling anything about the screen. But you have understood the idea of relative sizes well.As for the new font, MS provides an utility called WEFT that will enable IE users to view your font. Others however won't, so the only way to make the text available in all browsers is... correct - an image or Flash animation. Your other alternative is to use WEFT and also add alternative fonts for Firefox and Opera. For example:

h1, h2 {background-color:transparent; font-family: "Morpheus Regular", Arial, sans-serif; text-align:center}

By the way, CSS code is not "markup". Only "Markup languages" are written in "markup". This includes all SGML based languages (HTML), and all XML based ones (XHTML, XSLT, SVG, etc.).

[jlhaslip]

Here is a technique you might find helpful. http://www.mikeindustries.com/blog/archive...ase-candidate-2

[ste]

the great thing about sIRF is that your html remains <h1>title</h1> etc. but the javascript replaces it with flash so its search engine friendly.

[aspnetguy]

I juast blogged about a JavaScript font detector. You may be able to use this to detect the font and if not found use and image. At least if the font is found that user won't have to wait for the images.http://www.aspnetguy.com/blog/index.php/archives/4

[PrateekSaxena]

WEFT is really nice...thanks for the link!@aspnetguy : your blogs template is really cool...did you make it yourself??

[Daciana]

Ok, wow, a lot of information here I have to research and assimilate. I've just barely scratched the surface of html and css, let alone JS and whatnot. To date my education in all this has consisted of "HTML for Dummies" and the W3Schools tutorials and that's it! Some of what you all are saying I don't even understand so I'm gonna ask. I won't learn nothin' if I don't ask, right?Prateek said:"Sorry, but it will have to be an image or a Flash file if you wanna display it!" ---- Could you elaborate a little?boen robot said:" Your other alternative is to use WEFT and also add alternative fonts for Firefox and Opera." ------ Where does Netscape fall?jlhaslip said:"Here is a technique you might find helpful. http://www.mikeindustries.com/blog/archive...ndidate-2" andste said:"the great thing about sIRF is that your html remains <h1>title</h1> etc. but the javascript replaces it with flash so its search engine friendly. "I'm embarassed to say I don't even understand what you're trying to tell me. JS, flash, sIRF....you might as well be speaking Chinese to me. And yes, I looked at the link twice.And lastly, aspnetguy said:"I juast blogged about a JavaScript font detector. You may be able to use this to detect the font and if not found use and image. At least if the font is found that user won't have to wait for the images.http://www.aspnetguy.com/blog/index.php/archives/4 " ---- The excerpt: "This Javascript code can be used to guess if a particular font is present on the users machine. It uses simple Javascript and some CSS rules to check whether that font is available."Uhmmm, if the particular font IS available, then the text is seen as intended, if the font is NOT available then a default or another specified font family is substituted. I don't understand what the relevance is to knowing if the viewer has the font or not. It either works or it doesn't, right?Another excerpt: "We try to create a string with a specified font-face. If the font-face is not available, it takes up the font-face of the parent element. We then compare the width of the string with the specified font-face and width of the string with the font-face of the parent element, if they are different, then the font exists, otherwise not." ---- Oh boy, I keep reading this over and over and still have this look of total lack of understanding here. Why am I suddenly reminded of those Russian dolls that fit nicely into each other then into another, and another, and another...I want to fix my code issues. In the process I'll try not to be too much of a pain-in-the-arse. I promise, when this is all over, and the website is up, I'll make you all proud.

[jlhaslip]

I don't understand what the relevance is to knowing if the viewer has the font or not. It either works or it doesn't, right?

Exactly the same thing. If you specify a particular Font and they have it, it works. Otherwise, it doesn't. So, then you have a limited number of choices available to you.First, download the Font for them. Not a good idea for several reasons, not the smallest of which is security. I, as a client, do not really want to allow you to add things to my computer outside of the information I require to view your site. So forget about downloading the font. It is a pain anyway.Second, provide an image to be used instead of the Font. Not a bad idea, but it takes some coding to do that, and some Graphics skills. Do you have them? this is an option. and Images aren't "linkable" by the search engines, so you would lose your opportunity to rank.Thirdly, and similar to the second option, is sIFR, which substitutes the text with a Flash Image while maintaining your core html codes. Better for the search engines. Still needs to be installed onto the site and set up properly, but it isn't difficult, really.Fourth, Font substitution. In your html page, where you select the Font to be used, you can specify a series of fonts and the Browser well try to use the first one named, and then the second one, etc, until it finds a suitable font. hat is wh the last font on the list should be a "generic" Font, which everyone will have. At least the information will display something, and you don't neeed to finagle all the other options into place. Of course, you also don't get to see your snazzy font, but which is the most important here, getting the information out and around the net? or how the page looks to those few who can see it the way you intend for it to be seen?

[PrateekSaxena]

Does SVG allow non standard fonts??

[boen_robot]

boen robot said:" Your other alternative is to use WEFT and also add alternative fonts for Firefox and Opera." ------ Where does Netscape fall?

Long ago, Netscape created their own browsering engine they put inside their web browser. Then IE came bundled with Windows, eventually forcing Netscape to abandon their engine. They opened it's source code. At that point the Mozilla foundation was estabilished and they released Firefox some time after. Firefox's engine is now the second most widely used engine after IE's. Scince Netscape abandoned their engine, no one is using it nowadays. The current Netscape browser uses Firefox's engine by default with the option to switch to IE's rendering engine. Scince the Netscape browser and Firefox have the same engine, the page is rendered in the same way in boh of them. The same applies to browsers that use the IE engine- the page is rendered in them the same way it's rendered in IE.

Does SVG allow non standard fonts??

It does actually... but as filters, which is only supported on Desktop browsers (but then again, fancy fonts won't display nice on mobile browsers anyway). I'm also not sure whether Firefox supports filters. I remember once reading a tutorial made by Adobe for this, but I don't remember where it is. I'll post if I find it.I don't see much use of the JS detection script either. I mean, the CSS I gave you does exactly that. Applies the first font if available, the second if the first is not, etc.

[Daciana]

You all are wonderful for answering all my tedious questions. jlhaslip...you've provided me with several alternatives and their pros and cons, thank you. boen robot...I had no idea that Firefox and Mozilla'a origins were from Netscape. Then again, until very recently thanks to this forum I never knew they existed at all. I guess I'm an IE slave. Thanks again for all the info. I really appreciate the assistance.