MyFont API

The
The "Fun Font" typeface rendered using the MyFont API.

The MyFont API displays and exports text commands using custom characters drawn with Processing.js code, with support for text leading, trail space, alignment, and infinite text weights! It has been used in several of my logo designs, including the logo for this site.

Updated

Programming Language

Typeface Used

MyFont API

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 text() functions.

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 line()s, ellipse()s, arc()s and point()s.

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!

Using MyFont

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, textSize() and textAlign() would become myTextSize() and 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, \n.

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 strokeWeight()!

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.

I have been using the Fun Font and the MyFont API to make plenty of other logos! View all projects that use the MyFont API.

By | 2016-10-14T16:11:28+00:00 July 4th, 2016|3 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

3 Comments

  1. Emory Andrew Christensen July 25, 2015 at 7:54 pm - Reply

    I love this thing! It just takes a long time to make all of the characters… :P

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Go to Top