Using custom fonts with processing.js + adding a processing based header to a wordpress theme


While integrating a processing sketch to my webpage ( click on the header! ) with non-standard fonts in processing.js I ran into all sorts of problems, learned quite a bunch of new stuff and did a fair share of trouble shooting. The topic is not too-well documented (at least from my standpoint, I am quite new in this business), so I decided to pull together the resources I found and the knowledge I acquired. So, the main problem with processing.js and type is that it doesn’t support the standard processing .vlw type format, so instead of creating a font.vlw file and putting it in your data folder you have to create the font within your sketch from .otf or .ttf file. The success of this action is dependent solely on browser support of named formats, that information can be found here. From what I read, the safest bet is to use a .ttf file, just because it’s a more primitive format ( You can read about the difference between the two here ). You can convert you typefaces online at – it looks terribly fishy, but I tested it and it does it’s work as it claims to. For processing.js to successfully use a .ttf or .otf file you have to preload it into browser using something called a @pjs directive. Note that it is in the comment quotes which is rather odd syntax. There is an example of working code on the right.
Another problem I encountered which is quite specific for integrating your sketch to the header/footer/anywhere in your webpage is permalinks. Basically when you target processing.js to load a font it by default targets the directory in which the script is run, so all the items for preloading are targeted relatively to URL. For example if you have your font.ttf together with processing.js in the root directory of your webpage, and the script your are running is embedded in the index.html of that page it will be ok. So if your html file looks like ( or contains ) the code on the right, and futura.ttf is in the same directory, it works ok. Similarly if you put your font in /fonts/ directory and use fonts/font.ttf for better organisation when preloading/loading it into your sketch it will also work. WordPress however ( and I guess other CMS’es ) can raise a problem in this stage. If you are using pretty permalinks than wordpress generates links like for pages and for posts. If you add your sketch to the header.php file within theme files , than processing.js will assume that the that the data is within the folder shown by the permalink, so if you execute the code shown above instead of trying to preload it will try to preload which of course doesn not exist and of course it will fail. The way to force processing.js to load file relativly to root/ rather than the current directory is by simply adding “/” before the link. However the catch is that you have to add it both in @pjs directive and createFont function. So the functioning code will look the one on the right. This will load the font from the root directory of your web, therefore it will work with any style of permalinks enabled. For reducing clutter I recommend putting all the fonts in the /fonts/ directory. Obviously instead of font=/futura.ttf; and createFont(“/futura.ttf”, 32); you will have to use font=/fonts/futura.ttf; and createFont(“/fonts/futura.ttf”, 32);. Same logic should apply when loading png and jpg images, svg graphics and any other filetypes with @pjs directive. There were however some problems which I didn’t manage to solve. For example, I embed the whole pjs code to my header.php rather than using a link to a file containing the code, like this Also, there is an alternative to loading fonts from the file, and that is using base-64 encoding. I tried to implement it, but it failed to work, I described it in detail on processing forums but never got a reply, if any of you have some clues on that topic, I would be glad if you would leave a comment. There is a number of useful articles and threads on the topic, primarily I recommend reading Scott Downe’s extremely detailed and useful four part article processing.js, canvas, custom fonts and @font-face which comes with working examples and proved to be very helpful while experimenting. Also there is a thread on processing forums about font conversion, couple of google groups threads ( which suggest using loadFont rather than createFont, quite odd ), a developer thread and official documentation which are worth checking out. Hope this was useful for you, and try clicking on my header to enjoy it’s generative typographic ASCII goodness.