Font visualizer demo

Font visualizer demo

Want to do it yourself?

You'll need two downloads and a copy&paste editing. The recipe:

Go to https://fonts.google.com/ to find your font.
Select and download it. You can play around with them during selection.
Download opentype.js, the font processing library from: https://raw.githubusercontent.com/opentypejs/opentype.js/master/dist/opentype.js
If you download the map file too, then you can avoid a warning appearing on console while debugging the page.

Copy and paste the code below to a html file in the same directory where you unzipped the font.ttf and saved the opentype.js file:

<!DOCTYPE html>
<html>
<head>
<title>Font visualizer</title>
<meta charset="utf-8">
<script src="opentype.js"></script>
<script>
var fontname = 'DancingScript-Regular.ttf';
var debug = null;
var text = null;
var animation = null;
var options = {
	kerning: true,
	hinting: false,
	features: {
		liga: true,
		rlig: true
	}
};
function trace(s) {
	debug.innerText += s + "\n";
}
opentype.BoundingBox.prototype.translate = function(shift) {
	this.x1 += shift;
	this.x2 += shift;
	return this;
}
opentype.BoundingBox.prototype.merge = function(box) {
	if (box.x1 < this.x1) this.x1 = box.x1;
	if (box.y1 < this.y1) this.y1 = box.y1;
	if (box.x2 > this.x2) this.x2 = box.x2;
	if (box.y2 > this.y2) this.y2 = box.y2;
}
function Animation(font) {
	this.svg = document.getElementById('svg');
	while (this.svg.firstChild) {
		this.svg.removeChild(this.svg.firstChild);
	}
	this.font = font;
	this.glyphs = font.stringToGlyphs(text, options);
	this.paths = [];
	this.steps = [];
	var translate = 0;
	this.translates = [];
	var box = null;
	partPattern = /[A-Z]/g;
	for (var idx in this.glyphs) {
		var glyph = this.glyphs[idx];
		var path = glyph.path.toSVG().substring('<path d="'.length);
		this.paths.push(path);
		while (partPattern.test(path) === true) {
			this.steps.push({ path: idx, position: partPattern.lastIndex });
		}
		this.translates.push(translate);
		if (translate == 0) box = glyph.path.getBoundingBox();
		else box.merge(glyph.path.getBoundingBox().translate(translate));
		translate += glyph.advanceWidth;
	}
	this.actual = 0;
	svg.setAttribute('viewBox', box.x1 + ' ' + (-box.y2) + ' ' + (box.x2-box.x1) + ' ' + (box.y2-box.y1));
	requestAnimationFrame(this.step.bind(this));
}
Animation.prototype.step = function(timestamp) {
	if (this.steps[this.actual].position == 1) {
		this.createPath();
	} else {
		this.adjustPath();
	}
	if (++this.actual < this.steps.length) {
		requestAnimationFrame(this.step.bind(this));
	}
};
Animation.prototype.createPath = function() {
	var idx = this.steps[this.actual].path;
	var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
	p.setAttribute('id', 'p' + idx);
	p.setAttribute('transform', 'scale(1 -1) translate(' + this.translates[idx] + ' 0)');
	p.setAttribute('fill', 'none');
	p.setAttribute('stroke', 'red');
	p.setAttribute('stroke-width', '5');
	this.svg.appendChild(p);
};
Animation.prototype.adjustPath = function() {
	var idx = this.steps[this.actual].path;
	var p = document.getElementById('p' + idx);
	p.setAttribute('d', this.paths[idx].substring(0, this.steps[this.actual].position - 1));
};
function animateFont() {
	debug = document.getElementById("debug");
	text = document.getElementById('text').value;
	opentype.load(fontname, function(err, font) {
		if (err) {
			trace(err.toString());
			return;
		}
		animation = new Animation(font);
	});
}
window.onload = animateFont;
</script>
<body>
<h1>Font visualizer</h1>
<svg id="svg" width="100%">
</svg>
<p><input type="text" id="text" value="SoloLearn" /></p>
<input type="button" value="Animate" onclick="animateFont()" />
<pre id="debug"></pre>
</body>
</html>

Good luck!

Comment whether you are successful.