Font reference revamp

A while ago, I created a single small HTML page with a bunch of easy to read fonts for web publishing. This afternoon, I got some free time so I did a rewrite of the whole thing as a web application.

Font reference

The biggest problem with the old version is that every font was displayed all on one page which would have made expanding the list more cumbersome. Also, a lot of people had started to hotlink to the old font images (not just these, but a lot of other images on my server which was starting to affect my bandwith), so I’ve instead added permalinks to each font and the letter index as an alternative.

There’s no server-side scripting and the whole thing is basically JavaScript courtesy of jQuery. You can take a look at the old version at the end of this post.

Sourcecode of “fref.js” (please be advised that I may change the actual running version at any time and this is only current as of this post).

$(function() {
	var pIndex, pFont, fCanvas;
	var ta = [];


	function Init() {

		fCanvas = $("#fonts");

		// Titles list
		var t = $('<ul />');

		// Unique index
		for(var i = 0; i < fonts.length; i++) {
			var f = fonts[i];
			var ni = true;

			for(var j = 0; j < ta.length; j++) {
				if(ta[j] == f[0])
					ni = false;

				ta[ta.length] = f[0];

		for(var i = 0; i < ta.length; i++) {
			t.append('<li><a href="#'+ ta[i] +'">'+ ta[i] +'</a></li>');
			var s = $('<div id="'+ ta[i] +'" />');
			var u = $('<ul />');

			for(var j = 0; j < fonts.length; j++) {
				if(fonts[j][0] == ta[i]) {
					var f = fonts[j];

			s.append('<h2>“'+ ta[i] +'” Fonts '+
				'<span><a href="'+
				ta[i] +'">Permalink</a></span></h2>');

			create: function(e, ui) {
				findFont(pIndex, pFont);

	function searchValidate() {
		if("?i=") > -1) {

			var pn = $.trim(
					.replace(/\s/g, "");

			var s = pn.indexOf("?i=") + 3;
			var e = pn.indexOf("&f=");

			if(e > s)
				pIndex = pn.substr(s, e - 3);
				pIndex = pn.substr(s);

			pIndex = (!pIndex)? "0-9" : pIndex;

			if((e > 0) && (e + 3 < pn.length))
				pFont = pn.substr(e + 3, pn.length);

		if(ta.indexOf(pIndex) < 0)
			pIndex = ta[0];

	function findFont(i, f) {
		fCanvas.tabs("option", "selected", ta.indexOf(i));
		var fnt = $('#' + f);

		if(fnt.length > 0) {
			$('html,body').animate({ scrollTop: fnt.offset().top - 10 }, 1000);
			fnt.effect("highlight", {}, 5000);

	function felement(f) {
		var a = f[2].replace(".png", ""); // Image without .png extension becomes font ID
		var st = '<li id="'+ a +'">' +
			'<ul><li>'+ f[1] +'</li>';

		// Additional attributes
		for(var i = 0; i < f[3].length; i++)
			st += '<li>'+ f[3][i] +'</li>';

		// Permalink
		st += '<li><a href="'+ f[0] +'&f='+ a +'">Permalink</a></li></ul>' +
			'<img src="fonts/'+ f[2] +'" alt="'+ a +'" /><hr /></li>';

		return st;

The data is stored in a single “data.js” file as an array. I may change this to JSON in the future.

// Convention : index, title, font image, description array (new item per line)
var fonts = [
	["A", "Am Sans light", "am-sans-light.png", ["20pt", "Sans-serif"]],
	["A", "Andalé Mono", "andale-mono.png", ["20pt", "Monospace", "Sans-serif"]],
	["A", "Arial", "arial.png", ["20pt", "Sans-serif"]],
	["A", "Avenir - Book <strong>Commercial</strong>", "avenir-book.png", ["20pt", "Sans-serif"]],
	["B", "Bitstream Vera Sans (Roman)", "bitstream-vera-sans-roman.png", ["20pt", "Roman", "Sans-serif"]],
	["B", "Bitstream Vera Sans Mono (Roman)", "bitstream-vera-sans-m-roman.png", ["20pt", "Roman", "Monospace", "Sans-serif"]],
	["B", "Book Antiqua", "book-antiqua.png", ["20pt"]],
	["B", "Bank Gothic Lt BT", "bank-gothic-light-bt.png", ["20pt", "Small caps", "Sans-serif"]],
	["C", "Calibri", "calibri.png", ["20pt", "Sans-serif"]],
	["C", "Candara", "candara.png", ["20pt", "Sans-serif"]],
	["C", "Century Gothic", "century-gothic.png", ["20pt", "Modern, Geometric, Bold", "Sans-serif"]],
	["C", "Consolas", "consolas.png", ["20pt", "Sans-serif"]],
	["C", "Courier Std", "courier-std.png", ["20pt", "Monospace"]],
	["D", "Dutch801 Rm BT <strong>Commercial</strong>", "dutch801-rm-bt.png", ["20pt"]],
	["E", "Eurostile", "consolas.png", ["20pt", "Modern", "Sans-serif"]],
	["F", "Florencesans", "florencesans.png", ["20pt", "Sans-serif"]],
	["F", "Franklin Gothic Book", "franklin-gothic-book.png", ["20pt", "Modern, Geometric", "Sans-serif"]],
	["G", "Georgia", "georgia.png", ["20pt"]],
	["G", "Gill Sans MT", "gill-sans-mt.png", ["20pt",  "Sans-serif"]],
	["G", "Gotham Light <strong>Commercial</strong>", "gotham-light.png", ["20pt", "Mdoern, Geometric", "Light", "Sans-serif"]],
	["H", "Humanist521 BT (Roman) <strong>Commercial</strong>", "humanist521-bt-roman.png", ["20pt", "Roman", "Sans-serif"]],
	["L", "Lucida Sans", "lucida-sans.png", ["20pt", "Sans-serif"]],
	["L", "Lucida Unicode", "lucida-unicode.png", ["20pt", "Unicode", "Sans-serif"]],
	["M", "Microsoft Sans Serif <strong>*</strong>", "microsoft-sans-serif.png", ["<strong>* Not the same as MS Sans Serif</strong>", "20pt", "Sans-Serif"]],
	["M", "Monaco", "monaco.png", ["20pt", "Modern, Condensed", "Sans-serif"]],
	["M", "MS Sans Serif <strong>*</strong>", "ms-sans-serif.png", ["<strong>* Not the same as Microsoft Sans Serif</strong>", "20pt", "Sans-serif"]],
	["M", "Myriad", "myriad.png", ["20pt", "Sans-serif"]],
	["T", "Tahoma", "tahoma.png", ["20pt", "Sans-serif"]],
	["T", "Trebuchet MS", "trebuchet-ms.png", ["20pt", "Sans-serif"]],
	["U", "Univers <strong>Commercial</strong>", "univers.png", ["20pt", "Sans-serif"]],
	["V", "Verdana", "verdana.png", ["20pt", "Sans-serif"]]

It still leaves a lot of work to be done; most obviously, the reference phrase “The quick brown fox jumps over the dirty dog” is wrong. It should be “The quick brown fox jumps over the lazy dog”. Also the list is pretty small and limited only to a handful of fonts I’ve used. I’m planning to add a full collection of possibly every font I’ve used in the past (even perhaps the stylish and not-so-easy-to-read variety)

Old font reference index

I’m thinking of writing a very basic discussion board in ASP.Net MVC and I may use the new design in that. The CSS is very minimal and most of the extra jQuery UI styles are from the customized Smoothness theme.