HTML CSS JavaScript Font on Site without use of Image

Question

I know of cufon and one other similar. But what is the best way to use a non web standard font as a font on your site? I have a client who has 2 distinct fonts they want to use as the text through out the site being created but they are not standard fonts for the web. I could do them as images maybe, if they were just navigation use. But they want the whole body up and down to be using these fonts through out.

Answer 1

after some good, some bad times with cufon, i settled using @font-face and enjoy it.

if your font license allows it, http://www.fontsquirrel.com/fontface/generator is a nice generator for all the needed files + some basic css.

Answer 2

I think all other posts has said the same thing. I find @font-face the best tool for alternative fonts. If you have you own font you can use the font-squirel generator as mentioned by Roman.

But

If you just what a wider choose of fonts you can't do any better than Google fonts - http://www.google.com/webfonts. This service easily let you add fonts to your site.

Answer 3

This is an example of how I use a font on my website.

@include url('http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css');
@font-face { font-family: VAGLT; src: url('VAGLT.TTF'); } 
@font-face { font-family: VAGBT; font-weight: bold; src: url('VAGBT.TTF'); }

.boldtitle{
    font-family: VAGBT, sans-serif;
    font-weight: bold;
}

This of course is in the stylesheet.

Answer 4

There are a few issues to deal with here.

Embedding

You can embed font files (OpenType, Web Open Font Format [WOFF], etc.) using CSS's @font-face. Different web browsers support fonts in different formats so you will need to use multiple formats to catch all the variations.

Something like the following should work:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf')  format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
}

body {
    font-family: MyFontFamily, /* etc. */ sans-serif;
}

Legal

You ought to check the font licenses to make sure they can be used on the web. The kind of embedding shown above is broadly considered a limited form of distribution, but many font licenses are quite liberal these days.