Simple Plumin.js example "p glyph", try it at http://jsfiddle.net/gh/gist/library/pure/6fcfaa9c968fd6392fb3/

fiddle.css

textarea {
	width: 100%;
	height: 300px;
	
	margin: 0;
	padding: 20px;
	
	border: 0;
	border-radius: 0;
	
	font-family: 'Demo', sans-serif;
	font-size: 50px;
	
	resize: none;
}
 
#download {
	display: inline-block;
	margin: 5px;
	padding: 5px 7px;
	
	text-decoration: none;
	color: #FFE;
	background: #FF725E;
}

fiddle.html

<textarea class="result">p</textarea>
<a download="demo.otf" href="#" id="download">▽ Download</a>
<canvas id="canvas" width="1024" height="1024" style="display: none;"></canvas>

fiddle.js

// plumin.paper is aliased to the variable p, for conciseness
(function(p) {
'use strict';

// Setup paper.js by providing a canvas element
p.setup( document.getElementById('canvas') );

// create a new font and specify its name
var demo = new p.Font({ familyName: 'Demo' }),
    // create the glyph 'p' and add it directly to the demo font
    glyph_p = demo.addGlyph(new p.Glyph({
        name: 'p',
        unicode: 'p',
        advanceWidth: 450
    }));

// create a rectangular path to form the stem
glyph_p.addContour(new p.Path.Rectangle({
    point: [0, -255],
    size: [100, 800]
}));
// create an ellipse for the bowl
glyph_p.addContour(new p.Path.Ellipse({
    point: [50, 0],
    size: [400, 550]
}));
// and another one for the counter
glyph_p.addContour(new p.Path.Ellipse({
    point: [100, 100],
    size: [250, 350]
// reverse this path to create a hole in the previous paths
})).reverse();

    // create or update the binary data of the OpenType font
demo.updateOTCommands()
    // make it available in the page as a font-face
    .addToFonts();

// After .prepareOT(), the font is ready to download
document.getElementById('download').onclick = function() {
    demo.download();
};

})(plumin.paper);

fiddle.manifest

name: Simple Plumin.js example
description: Using one rectangle and two ellipses to create a p
authors:
  - Louis-Remi Babe
resources:
  - http://byte-foundry.github.io/plumin.js/dist/plumin.js
  - http://byte-foundry.github.io/plumin.js/bower_components/knacss/css/knacss.css
normalize_css: no
wrap: b