Some time ago, I started taking logo requests from Khan Academy users. After I made the logo for KCI Productions, I realized the need to make a font API. The shapes making up the word “PRODUCTIONS” were hard-coded manually. And it’s no fun hard-coding every single letter whenever I need to display a word.
And so I was inspired to make the MyFont API. It is used similar to the way you would call regular Processing.js
Here’s an example:
translate(200, 200); myTextFont(funFont); myTextAlign(CENTER); myTextFill(100, 166, 255); myTextSize(30); myTextWeight(3); myText("THIS IS DY'S FUN FONT!", 0, -140); myTextFill(0, 166, 25); myTextSize(50); myTextWeight(4); myText("AWESOME!!!", 0, -80); myTextAlign(RIGHT); myTextFill(100); myTextSize(10); myTextWeight(4); myText("NOW WITH HORIZONTAL ALIGNMENT!", 180, -25); myTextAlign(CENTER); myTextFill(230, 26, 155); myTextSize(20); myTextWeight(3); myTextTrailSpace(-2); myText("ABCDEFGHIJKLMNOPQRSTUVWXYZ", 0, 15); myTextTrailSpace(2); myText("ABCDEFGHIJKLMNOPQRSTUVWXYZ", 0, 40); myTextTrailSpace(6); myText("ABCDEFGHIJKLMNOPQRSTUVWXYZ", 0, 65); myTextAlign(LEFT); myTextLeading(currentMyText.size + 16); myTextWeight(3); myTextFill(50, 150, 120); myText("WEIGHTS,\nALIGNMENT,\nTRAIL SPACE!", -180, 100); myTextAlign(RIGHT); myTextLeading(currentMyText.size + 15); myTextWeight(2); myTextFill(200, 10, 250); myText("SIZES,\nCOLOR,\nLEADING!", 180, 100);
A “MyFont” is defined as a variable containing a set of functions. Each function makes function calls to Processing.js shapes, making characters. This allows for “custom-made” font faces that you can make using only code – and it can be much quicker than the traditional method of creating fonts. The Fun Font, the font I made for this demo, uses only
Try changing up the function calls in the drawing code, and make a completely new font face of your own. You can only imagine the possibilities!
To use a MyFont defined previously in the code, you call it like this:
myTextFont(funFont); All function calls resemble the built-in Processing.js functions, but with the word “my” in front. So,
textAlign() would become
myTextAlign(). Just as in Processing.js, you can switch up the leading, trail space, and text alignment (just horizontally for now). It even supports multiline text with the use of the newline character,
Here’s the best part: since all of these shapes are created and rendered dynamically with normal Processing.js shapes, you have an infinite variety of font weights. This is not easily done with standard font formats, which is why this is so unique. The characters are simply made out of lines and strokes, so changing the font weight is as easy as changing the
Try the Fun Font!
Here’s a cool MyFont sampler I made. Only capital letters and limited punctuation work for now, since that was all the characters I bothered to create with the Fun Font. Try typing in DARRYL YEO or DY, and you might notice how I made my official site logo!
I am interested to see how YOU can use this API! In the future, I am hoping to write a more complete documentation, and complete the font so it is more usable.
If you wish to put this API to good use, but don’t want to copy all of the API code, I made an exporter that exports hardcoded Processing.js drawing functions.