Link to sketch https://openprocessing.org/sketch/2684885
I found a library called opentype on github - a quick inspection of the readme file suggests that this might do the job.
Disclaimer: although I am aware there is an otf fonto format I have never looked into it before so I can’t be sure this will do exactly what you want.
Unfortunately I don’t have OpenProcessing plus membership so I can’t save your sketch and work on it. Is there a link we could use to download the font 
1 Like
Here is a zip file of Abelone.otf, a very nice shaded colorfont.
(Attachment Abelone.zip is missing)
After several hours of research and experimentation I managed to get it to work 
The code turned out to be very simple
let otf;
function setup() {
let p5canvas = createCanvas(640, 100);
getOFT('Gilbert-Color Bold Preview5.otf');
}
function draw() {
background(240);
// Font
// Display text X Y size
otf?.draw(drawingContext, 'Quark does it again LOL!', 20, 60, 60);
}
async function getOFT(url) {
const res = await fetch(url);
const buffer = await res.arrayBuffer();
otf = await opentype.parse(buffer);
}
Just a few of things to note
-
The font is loaded asynchronously so the variable
oftmay be undefined when we attempt to use it in draw, hence the conditional access operator (?.) must be used to prevent exceptions. -
The HTML file must link to the OpenType source so thhis link should appear in the header section of the HTML file
<script src="https://opentype.js.org/dist/opentype.js"></script> -
Obviously being a color font it will ignore the current stroke and fill colors when rendered.
This sketch simply shows that otf colorfonts can be displayed in p5js but incorporating it into the p5js language would be a very much bigger task.
3 Likes
That’s is a great solution. I will create a few sketches using the technique and credit you in every one. Sinan may be interested in adding the library to OpenProcessing.
Thanks!
Richard
The sketch I posted above works well for loading and displaying a single font but will not work for more than one because the variable otf would eventually be overwritten and ultimately only the font that took longest to load would be available in the sketch.
This sketch overcomes that by giving a each font a unique string ID and using this as a key to retrieving the associated font.
// These fonts were downloaded from
// https://www.fontspace.com/category/color
// and are free for personal use.
// Map to store fonts once they are loaded
const FONTS = new Map();
// Function to retrieve the font for drawing text
const drawFont = function (id) {
return FONTS.get(id);
};
// Shortcut for 2D drawing context can only be set after the
// canvas is created in setup()
let ctx2d;
function setup() {
let p5canvas = createCanvas(640, 300);
ctx2d = drawingContext;
// Load 4 fonts giving each one a unique string id
getOFT("gcd", "Gilbert-Color Bold Preview5.otf");
getOFT("hod", "HouseOfTheDragonColor-rge8L.otf");
getOFT("pbox", "Playbox-FREE.otf");
getOFT("tro", "TypoRgbOutlinedemo-Ean9W.otf");
}
function draw() {
background(255);
push();
stroke(0); strokeWeight(3); noFill(); rect(1, 1, width - 2, height - 2);
pop();
// Parameters: display text, x position, y position, font size
drawFont("pbox")?.draw(ctx2d, "Mary had a little lamb,", 20, 60, 50);
drawFont("gcd")?.draw(ctx2d, "Its fleece as white as snow,", 20, 120, 50);
drawFont("tro")?.draw(ctx2d, "And everywhere Mary went,", 20, 180, 48);
drawFont("hod")?.draw(ctx2d, "The lamb was sure to go.", 20, 250, 60);
}
// unique font
// ID file
async function getOFT(id, url) {
const res = await fetch(url);
const buffer = await res.arrayBuffer();
FONTS.set(id, await opentype.parse(buffer));
}
and the result -
1 Like
This is very useful. I looked at it in the p5 editor, but even though I was logged in, it would not let me download the sketch and support files. Any chance you could send me these colorfonts? I have the Gilbert.
HouseOfTheDragonColor-rge8L.otf
Playbox-FREE.otf
TypoRgbOutlinedemo-Ean9W.otf
The download option isn’t working for me in the editor. I copied the code to OpenProcessing, but can’t get it to run without errors. The most common error is Unsupported OpenType signature <!DOShow stack
I could not find the fonts recommended. I tried other .otf colorfonts, but none of them displayed.
The 3 fonts you don’t have I downloaded from here - house of the dragon was on page 5
Check filename is correct and if not in the same folder the relative path as well. If the filename and path differs from reality the statement await opentype.parse(buffer) will fail hence the error.
You can download the full sketch zip file from here. It includes the HTML and source files and the 4 fonts used. Simply unzip and copy what you need. You cannot view it by double clicking the index.html file as it needs a local server.
Thanks. I have that sketch posted now on OP, credited to you.
After triple-checking numerous colorfonts downloaded from Fontspace, I have found that at least half of them are in a format that opentype doesn’t seem to recognize. This is true regardless of their extenders, whether .otf, .ttf or .woff. I invite you to check them, because I am not familiar with opentype, and it may have some parameter settings to make them compatible.
I will send you a couple of them to test.
Another good font source is 1001 Fonts. I have just downloaded half a dozen colorfonts from them.
I have made more colorfont sketches. You are welcome welcome to download any fonts you like, but they are only for personal non-commercial use.
Richard
[
|
Sketches by Richard Bourne on OpenProcessing |
3 Likes
Amazing collection. Didn’t see a Harriss Spiral, but there are so many images I could have missed it.
OpenProcessing has something for everyone!
[
|
|
Indeed it does (even rotated 90 degrees).
Thank you for the credit 
Very true, I joined OP in 2009 (my user number is 1623) and in those days it was the only public resource allowing Processing users to display Java Applets exported from Processing.
At the time I was heavily into Java programming so with the demise of Java Applets I rarely visited OP. In the last 3 years I have left Java for Javascript and p5.js so now I am back sharing stuff on OP
Until I read this discussion I had never used any of these but was fascinated with the idea and thought there must be a way to display them in p5.js.
Although I have succeeded in using the opentype library to display colorfonts the OpenType format is so much more and I have only scratched the surface of what is possible.
For instance in my code I have passed just 5 parameters to the font draw method like this -
but the method accepts an optional sixth parameters to control various typographic options but I could did not manage to use it successfully.
There is so much more to learn about OTF and the opentype library and, although fascinating I have gone as far as I want. Maybe I will have another look when I have finished my current project