Web Design - Fonts

warrenaldo

Folks,

I am designing a website and I have been asked to use a non-standard font - "Din Medium".

I have to go and buy this font and add it to my standard fonts.
I will also have to put it on the server.

However, If this "Din medium" font is NOT on the visitors computer. It wont be in most cases.
What will happen?

How will the text display? Does it only need to be on the server.

Im confused - please help.

vodkadub

I'm think it will default to sans or something, maybe use flash for the logo as you can embed any fonts without the user having to have it on their own system, thats all I can think of maybe theres a better solution.

forbairt

Why are you putting it on the server ? Generating graphics on the server that will use it ?

Basically in css you should choose your fonts in the order you want them to display

I don't believe I've ever heard of that one chances of your visitors having it are slim.

But pick fonts close to it as your backup fonts.

font-family: "Din Min",Verdana,san-serif;

You'll also have to buy the font for each machine that you put it on so its really not ideal.

Create you graphics and so on using the font but use one of the standard fonts for the website if at all possible.

warrenaldo

So i can embed it in graphics - thats fine.

But text wise - its a non-runner then.
They visitor requires that font in order to see it.

I thought maybe because it was on the server it might serve it in that format.

But it will just serve the html. The visitors browser will interpret it - hence not recognising the "Din medium".

Is that correct.

forbairt

yes pretty much ...

However ... depending if its just text headings and so on you want to change ... you could use this method to do it ...

http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement

Basically ... runs javascript ... replaces text with flash (which contains the letters in the font you want)

heggie

there's also this option:

http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

forbairt

heggie wrote: »

there's also this option:

http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

Nice ... I didn't know about that one anyone used it themselves ?

p

Never used that, but have used SIFR a few times. It's simple enough to do, and pretty much the best way of doing font 'embedding' on the web.
http://nettuts.com/javascript-ajax/how-to-implement-sifr3-into-your-website/

Main thing is to keep it simple, just use it headings, and you'll be fine.

turgon

I was looking the font you are talking about. TBH, it doesnt look all the distinctive, surely you could find a more widespread common font that would do the job.

forbairt

turgon wrote: »

I was looking the font you are talking about. TBH, it doesnt look all the distinctive, surely you could find a more widespread common font that would do the job.

To be honest it looks like Verdana with a few minor differences

warrenaldo

The graphic Deisgner picked it - its now in the brochures and they want the website to have the same look and feel as the brochure.

There is big chunks of text on the website - so it may look the same for a few letters - but with a paragraph of text - the differences show up more - such as the spacing between lines and even letters.

I will just tell them that it cannot be done. Rather than mess around with the js library you suggested.

thanks folks. big help

forbairt

warrenaldo wrote: »

There is big chunks of text on the website - so it may look the same for a few letters - but with a paragraph of text - the differences show up more - such as the spacing between lines and even letters.

letter-spacing and line-height ... should take care of some of that for you

To be honest that font doesn't really look that different from some of the standard ones so I wouldn't really worry too much about it for hte body text ... but for the headers you could still use the other option. (Static graphics / flash / js graphics)

p

turgon wrote: »

I was looking the font you are talking about. TBH, it doesnt look all the distinctive, surely you could find a more widespread common font that would do the job.

forbairt wrote: »

To be honest it looks like Verdana with a few minor differences

To an untrained eye there's little difference. Typography is the art of seeing those subtleties and knowing why they make all the difference to a successful design.

warrenaldo wrote: »

The graphic Deisgner picked it - its now in the brochures and they want the website to have the same look and feel as the brochure.
There is big chunks of text on the website - so it may look the same for a few letters - but with a paragraph of text - the differences show up more - such as the spacing between lines and even letters.
I will just tell them that it cannot be done. Rather than mess around with the js library you suggested.
thanks folks. big help

Yea, there's no decent way to use font embedding for paragraphs of text sadly. Just use a standard font, and maybe consider using the font for a few key items like headers, navigation or buttons, that's usually the best approach to take.