Web safe all the fonts

In CSS 3 you can use your own fonts instead of having to rely on whatever the user happens to have installed. With @font-face you can define a new font and tell the browser where to download it from.

@font-face {
  font-family: "My own font";
  src: url(fonts/myownfont.woff);
}

The best format to use for your fonts is WOFF (Web Open Font Format). You can easily convert common TrueType or OpenType fonts to WOFF. Make sure that you have the proper license for the fonts you use.

The new font can then be used exactly like any other font in your style sheets. As usual we give alternative fonts that the browser can fall back on if it fails to download our font.

body {
  font-family: "My own font", Arial, Sans-Serif;
}

The browser will also use the alternative fonts if it does not support the new technologies. Support exist in all current browsers. There are services on the web that can give you support for older browsers as well as take care of the licensing for you.

Below is an example where I use a font of my own creation to hide spoilers:

Spoiler text: This text will shown in a custom unreadable font until you hover over it. Then the font will be changed to Arial and be readable again. If your browser does not support @font-face or WOFF this will not work.

PS: This probably isn't the best way to implement a spoiler hiding feature.