processing.js, canvas, custom fonts and @font-face. Chapter 2

Adding some work I did on my last post, which is now Chapter 1, of what will probably be a new home in working with fonts.

There are limitations to what we can and cannot do with fonts, but there is room for improvements, and things we can do that p5 cannot.

For starters, we cannot support the processing .vlw file type, but we can support .ttf, .otf, and any fonts defined in the browser/os.

We need to add custom fonts to the @pjs directive, containing a url to the font file, to preload the font file. This is not totally accurate, as there is no way to check if the font is loaded or not, so it’s not preloading, it’s just predefining, but we do need to know the name of the font, and it’s better to start loading it sooner rather than later (when you hit the createFont/loadFont functions).

I’m not going to get this perfect, but I will get it working, and we’ll go from there.

Processing.js will now be able to load custom fonts defined as a data uri, that’s passed as a string to the loadFont/createFont functions, and the @pjs directive.

Font types we support are listed here… and as they improve the @font-face support, we will also gain improvements. Some browsers support .svg fonts.

It seems the widest supported font type to use would be .ttf

createFont’s parameters smooth and charset are problematic. smooth is used to set antialiasing to true or false, and I don’t think we can support that at the moment. Not sure yet what charset is supposed to do, but I’m looking into that.

I was having problems with chrome, not rendering .otf or .ttf fonts, but loading a data uri of a font fine, but it turned out (after much fighting) that it was simply a crappy font file, as when I re downloaded it, and others like it, it worked; a problem I should watch out for.

Anyway, here is a demo using custom fonts in processing.js. It is still not preloading the font file, so if you try and use your font out side of the draw loop in processing.js, you will not see it after it loads, but inside the draw loop, your font will be updated after it loads. I do plan on doing preloading, and I have a crazy idea I’ve seen floating around google to preload fonts I was working on today, hopefully tomorrow, I will be able to talk about it, and show it. How it works is you get the size, in pixels, of a string using your custom font, and if the size is not equal to the same string using the default font face, your custom font is loaded. For obvious security reasons, there is no way for the browser to read a users computer to determine the fonts installed.

Expect chapter three tomorrow evening, along with a demo preloading the font file (I say this so I cannot back out).


One Response to “processing.js, canvas, custom fonts and @font-face. Chapter 2”

  1. Just wanted to say that I am struggling with p5 and fonts for a week now and your post is the most helpful resource around :))

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: