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.

I have created an example page where I use a font of my own creation to hide spoilers.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s