Render VSM Symbols 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 wont 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 Firefox 3.5, Safari 4 and Internet Explorer 8. Unfortunately it doens't work on earlier versions of these browsers.

If your browser is compliant, column 2 will have VSM Symbols, otherwise you will just see the same text as in column 1. To see the full mapping of VSM symbols Click Here

Sample Table

Characters VSM Symbols
u
u
i
i
o
o
f
f
g
g
h
h
&
&
*
*
(
(
)
)

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: "VSM";
  src: url(http://www.ambor.com/public/vsm/vsm_symbols.ttf) format("truetype");
  }

.vsm { font-family: "VSM", sans-serif }
	 
</style>
</head>
<body>
Here are some VSM Symbols <div class="vsm"> & * ( ) g f d s </div>

</html>