Using TTF's as PFonts in Processing.js

SOURCE FOR EXAMPLE ABOVE: 
Download example

/*   
    Using TTF's as PFonts in Processing.js    
    Example by: hyper-metrix.com/F1LT3R
    License: none
*/

// Set up the screen
void setup(){  
    size(400, 400);
    noStroke();
    strokeWeight(0);  
}

float y;
float lineWidth;
float fontSize=50;
String myText = "Hello world!";

PFont fontA = loadFont("All_Star_Resort.svg");
PFont fontB = loadFont("Boingo.svg");
PFont fontC = loadFont("CrazyCrazy.svg");
PFont fontD = loadFont("GeosansLight.svg");
PFont fontE = loadFont("CloisterBlack.svg");
  
void draw(){    
    
    lineWidth = fontA.width( myText ) * fontSize;        
    textFont(fontA, fontSize);    
    fill(255,128,0,64);
    rect(0,y,lineWidth,fontSize);    
    fill(255,128,0);
    text(myText, 0, y);                     
    
    y+=fontSize;
      
    lineWidth = fontB.width( myText ) * fontSize;
    textFont(fontB, fontSize);
    fill(128,255,0,64);
    rect(0,y,lineWidth,fontSize);
    fill(128,255,0);
    text(myText, 0, y);
      
    y+=fontSize;
    
    lineWidth = fontC.width( myText ) * fontSize;
    textFont(fontC, fontSize);
    fill(0,255,128,64);
    rect(0,y,lineWidth,fontSize);
    fill(0,255,128);
    text(myText, 0, y);        
    
    y+=fontSize;
    
    lineWidth = fontD.width( myText ) * fontSize;
    textFont(fontD, fontSize);
    fill(0,64,255,64);
    rect(0,y,lineWidth,fontSize);
    fill(255,255,255);
    text(myText, 0, y);
    
    y+=fontSize;
    
    lineWidth = fontE.width( myText ) * fontSize;
    textFont(fontE, fontSize);
    fill(255,255,0,64);
    rect(0,y,lineWidth,fontSize);
    fill(255,255,0);
    text(myText, 0, y);

    exit();
}

Disclaimer:

The Processingjs.org community accept no responsibility for the misuse of intellectual property and strongly advise that developers obtain copyright clearance before releasing any commercial work containing copy-written material. The fonts in this demonstration are provided by DaFont.com.

Usage:

Upgrade to the latest version of Processing.js
Download and uncompress: Batik TTF to SVG Convertor
In your console, type: java -jar ttf2svg.jar myFont.ttf -o myFont.svg. (You will need Java or JavaVM to run this).
An SVG file will be created by Batik.
Put myFont.svg into your Processing.js script directory on your server (requires: AJAX/XML & correct Mime-Types set for SVG).
In your Processing.js script load and use the font as follows:

// Load SVG font data into the glyph Table
PFont myFont = loadFont( "myFont.svg" );

// Activate the font for output
textFont( myFont, fontSize );

// Print text to Canvas
text( "Hello World!", x, y );

// Get width of text
myFont.width( "Hello world!" ) * fontSize;

// Get text-descent
float descent = myFont.descent;

// Get text-ascent
float ascent = myFont.ascent;

// Get units per em
float decent = myFont.units_per_em;

// Get default horizontal advance
float advance = myFont.horiz_adv_x;

Note:

The size of the EM has been calculated as follows: 1 pixel / units_per_em * fontSize(px). Be aware of this when using the font's ascent/descent values.

TrueType Fonts in Processing.js

Using Batik to export PFonts for use with Processing.js

Disclaimer:

Usage:

Note: