How to use our own fonts in web sites, which is compatible with all users?

Question

I need to use different hi-style fonts in my webpage. But i had fear that, if the user had no such font, then they will be displayed with default font. How to use different new font that should be compatible with all users?

Answer 1

Consider using a normal font that everybody has for body-text, the bulk of your content. There are quite a few to choose from. For headlines, use a drawing package (e.g., MS Paint, Photoshop) to format headlines as images using your preferred font. If you want to incorporate a fancier font for your body text, you can always resort to something like this in your CSS:

font-family: <some-fancy-typeface>, Calibri, "Gill Sans MT", Helvetica, Tahoma, Arial, sans-serif;

Remembering that it will try to use your fancier font first, then fall back through the list of more mundane choices until a match is found. Bear in mind that from a usability standpoint, most people prefer a simple font like Helvetica or Times Roman for their body text (consider Google, Yahoo!, Stack Overflow...). Spicing headlines up with bitmapped images is, of course, part of the spice of web-life.

Answer 2

Some webpages use a Flash movie just for the headline, in which the typeface can be embedded. You could use images (automatically generated). I personally consider that all bit unprofessional, but different people balance usability and standards against design differently.

And if you are re-distributing fonts, make sure you look at the legal implications.

Answer 3

Read this one about Dynamic fonts.

So, You Want Dynamic Fonts, Huh?

Dynamic Fonts

Dynamic fonts are font style files that download right along with the page that will use them. Think of them as an image. That's the basic concept.

When you use these fonts, the font file will download into your cache just like an image. Once there, as long as you don't clear your cache completely, the font will be there for all future visits. It is fun to watch the page the first time you use these fonts. The page will come in fully with the text in the default format. Then, once the font, or fonts, download, the entire page reloads and comes to life. It's a great effect.

The use of these fonts is basically a Netscape Navigator 4.0 or better deal. However, you can also view the fonts using MSIE 4.0 and above if you also include, along with the font, an Active X helper application.

Answer 4

You say you "need" to use "hi-style" fonts for your webpage. If that's really true, you'll need to go with Bob Kaufman's answer. The problem with using images for text, though, is it completely breaks indexing, searches, etc. Instead, consider not doing it and sticking with a prioritized list of fonts instead.

When you specify the font-family, you can give a list, and the first matching font will be used. This allows for graceful degradation -- if a user has your fancy font, fine, but if not the next best option (as defined by you) is used, e.g.:

body {
  font-family: "Nifty Cool Font", "Times New Roman", Georgia, Serif;
}

More on the w3schools page for the font-family property.

Answer 5

You could have a look at something like sIFR or TypeKit, which will use flash and javascript respectively to fix custom fonts.

There are not a lot of browsers that support @font-face properly yet.

Answer 6

you can sue javascript to achieve this.

here's a library as an example.

There might be more libraries out there who can do the same thing.

Answer 7

Hi,

You can use CSS (as posted before) to reference the .TTF files as shown here: http://weston.ruter.net/2008/08/27/efficiently-serving-custom-web-fonts/

Regards.

Answer 8

I use Cufón. It works with all modern browsers, is light and relatively easy to set up.

Answer 9

If you don't have many IE visitors on your site you can use CSS 3 web fonts

Answer 10

Depends what font you want to use ... the easiest solution is to use the @font-face method. If you include the microsoft only format(.EOT) it will work in ANY browser.

Font Squirrel has a great collection of free to use commercially, font kits, that include:

• Original TrueType or OpenType Fonts for Firefox 3.5 and Safari
• EOT fonts for Internet Explorer
• SVG fonts for Opera, iPhone & Chrome
• WOFF fonts for Firefox 3.6+
• Demo.html and stylesheet.css so you can get going fast

The @font-face method doesn't require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.

It's totally SEO friendly and scalable.