Fonts

Fonts test. A page showing some fonts that might work in your browser using CSS @font-face.

Adding a font to CSS

The following example uses a font named Sniglet, a 58.24 KB download. The following CSS code is the way you add the font if you have the font on your Web site. The example is a true type font and there are other font types that work.

<style type="text/css">
@font-face
  {
  font-family: Sniglet;
  src: url('/system/files/Sniglet.ttf') format("truetype");
  }
</style>

This is the way you test the font.

%lt;p style="font-family: Sniglet;">Test of the Sniglet font face.</p>

Sniglet

Sniglet is a free font from www.theleagueofmoveabletype.com/sniglet. The following tests may work in your Web browser. If they do, you will see round fat letters as shown in the following image.

Test of the Sniglet font face at the default size

Test of the Sniglet font face.
abcdefghijklmnopqrstuvwzyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 -=`~!@#$%^&*()_+
{}[]|\:";',.?/

Test of the Sniglet font face at the xx-large size

Test of the Sniglet font face at the xx-large size.
abcdefghijklmnopqrstuvwzyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 -=`~!@#$%^&*()_+
{}[]|\:";',.?/

Test of the Sniglet font face at the xx-large size with a line height 1.2em

Test of the Sniglet font face at the xx-large size with a line height 1.2em.
abcdefghijklmnopqrstuvwzyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 -=`~!@#$%^&*()_+
{}[]|\:";',.?/

License

Check the license for any font you want to use on your Web site. Most fonts have a license of some sort. Old licenses do not mention the use on the Web. New licenses often mention the Web and require a separate payment or a special attribution method.

Hosting

If you host a font on your Web site, the leeches will use the font on their Web site but point their CSS back to your Web site so you will pay for the download charges instead of them. You could fight the leeches by frequently changing the directory you use for the downloads and using other tricks.

Available fonts

There are lots of fonts you can use. Try to use fonts with an OFL (SIL Open Font License). The first example is the default font for this page. The next examples are specific fonts. If a specific font is not different from the default, either the specific font is your default or the specific font is not on your computer.

Default

This is the default font for this web page based on the supplied CSS.
abcdefghijklmnopqrstuvwzyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 -=`~!@#$%^&*()_+{}[]|\:";',.?/©

Further reading

• Sniglet
  

  Read more about Sniglet...