Eli Grey

Fonts in Processing.js

I recently implemented fully-featured cross-(HTML5-supporting)-browser loadFont() and text() functions in Processing.js. This implementation does not suffer from the limitation of the old implementation that only supported SVG fonts and writing text from already-installed fonts only worked recent Mozilla-based browsers. I also revamped the entire library, fixing a few hundred errors, changing and optimizing many Processing method implementations, and getting rid of all of the implied global variable leaks. Included is an image gallery of the same Processing program being run using Processing and Processing.js. The one showing only the outputted image was saved directly from a canvas element. You can also try out fonts in Processing.js at this demo page. The demo page does not use the same font as in the screenshot but it is similar. If your browser does not support @font-face CSS rules but does support the canvas text API, your system default monospace font will be used instead.

  • http://hyper-metrix.com F1LT3R

    SVG fonts work in Firefox, Safari, Chrome and Opera.

  • GottZ
  • Curran

    your demo page is broken. I get "Processing is not defined"

    • http://eligrey.com/ Eli

      Sorry, but the loadFont() patch has to be removed for when processing.js is fully-asynchronous. I’ll fix the demo when this happens.