Thread: Fonts

**hally0301** · 27 Jul 2009 @ 12.29

I have a question about using non-standard fonts on a webpage.

Up until now whenever I have used a nonstandard font on a webpage I have created the text as an image and then inserted it into the webpage as a jpeg so that I could be certain that the visitor would see the font that I intended.

Is there a CSS workaround or an HTML workaround for this so that I could just use the text with CSS, but still be certain that even for nonstandard fonts that they would be seen by visitors to the site??

:scared:

**Wrams** · 27 Jul 2009 @ 12.56

To be honest i really can't see a way around this. The browser reads what your PC has installed on it and hence makes the right selection to the next font you may have. If you don't have any of the fonts on your PC then i think it uses a default Arial font or something like that. I'm no expert in this field but thinking about it logically it sounds like you would have to carry on using images. I may be wrong and I'm sure soon enough someone will point me wrong...Lol

:Moved to General Development Issues:

**Jack Franklin** · 27 Jul 2009 @ 13.01

You can, there is a CSS property @font-face that will allow you do use any font.

BUT

We can't use it effectively at the moment, as most font foundries do not want us uploading their fonts to the net. You should google for sIFR and Cufon and those will be of use to you.

**spinal007** · 27 Jul 2009 @ 13.01

There are tricks, the most common of all being this:
Mike Davidson – sIFR

And some old tricks which involved asking the user to install the font on-demand, but that's just a terrible, terrible thing to do.

**WelshStew** · 27 Jul 2009 @ 13.07

In modern web browsers that support CSS3 you can use the @font-face tag to pull a font from your own server to render out the text.

Code:

@font-face {
    font-family: my-sexy-font;
    src: url('my-sexy-font.otf');

}

and then call it in within your normal font stack:

Code:

h3 { font-family: my-sexy-font, font stack, sans-serif; }

All browsers that don't support CSS3 will use the normal font stack, but you'll get your pretty-ness for CSS3 supported browsers.

A nice example is Elliot Jay Stocks » Home, who uses GraublauWeb

**hally0301** · 27 Jul 2009 @ 23.54

Just checked out the info on SIFR by Mike Davidson and am in the process of downloading it. Looks like that might go a long way to fixing the problem.

Thanks for all the help.