Render HarveyBalls on a web page using CSS

To download the font Refer to This Page


When creating a web page you usually have to work with the fonts installed on the browser's computer. Some newer browsers can read an arbitrary TTF file on the web page itself. This means that the browser no longer needs to have the font installed on their machine. This is a controversial feature for a number of reasons which I won't go into here; however, the method below will work on browsers that allow you to specify a font source in the @font-face CSS tag. I've tested and confirmed that this works on current versions of Firefox, Safari and Chrome.

If your browser is compliant, column 2 will have HarveyBalls, otherwise you will just see numbers.

Sample Table

Numbers Harvey Balls
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9

So, how did I work this magic? Well, you can either "View Source" to view this page or try a little experiment by copying the text below into a file and saving it with a .html extension. Then open it in a browser.



<html>
<head>
<style type="text/css">

@font-face {
  font-family: "HarveyBalls";
  src: url(http://www.ambor.com/hb/Harvey_Balls.ttf) format("truetype");
  }

.hb { font-family: "HarveyBalls", sans-serif }
	 
</style>
</head>
<body>
Here are some HarveyBalls <div class="hb"> 0 1 2 3 4 5 6 7 8 9 </div>

</html>