finish PFont implementation

[lmccart]

Typography

• PFont

Loading & Displaying

• createFont()
• loadFont()

Metrics

• textAscent()
• textDescent()

**Right now this issue is called "finish implementation", but really this is a little more conceptual than just implementation. Most of the basic Processing text features are in p5.js right now, but are there others that make sense? Some that don't? I think createFont() would probably go away, but it would be nice to have a way to hook in a webfont without having to touch the html/css.

[kevinbarabash]

@lmccart maybe we could use https://github.com/typekit/webfontloader for loadFont()

[GoToLoop]

... but it would be nice to have a way to hook in a webfont without having to touch the html/css.

I much prefer programmatically than touching config files like HTML & CSS!

[kevinbarabash]

WebFontLoader has a programmatic API. Here's an example using the canvas to render:

WebFont.load({
        google: {
            families: ['Playball']
        },
        active: function() {
            ctx.font = "50px Playball";
            ctx.fillText("Hello, world!", 100, 100);
        }
    });

Here's the resulting output:

WebFontLoader does add some CSS to the page, but I think that's unavoidable. If you're concerned about extra styles being added, here's the contents of the stylesheet that the loader adds:

/* latin-ext */
@font-face {
  font-family: 'Playball';
  font-style: normal;
  font-weight: 400;
  src: local('Playball'), local('Playball-Regular'), url(http://fonts.gstatic.com/s/playball/v6/qxC1Yj_4IUZ_PO35Va79QxkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playball';
  font-style: normal;
  font-weight: 400;
  src: local('Playball'), local('Playball-Regular'), url(http://fonts.gstatic.com/s/playball/v6/sSjR6AJRrIl2FxjhncYng3YhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

I believe that @font-face defines a symbol that can only be used as the value of a font or font-family property so unless the user has another @font-face declaration with the same name but uses a different font, they should be okay.

[debone]

I tripped on this now, I want to render text with a custom font...
Shoud I use WebFontLoader or implement loadFont? I read some of the docs and WebFontLoader still needs custom CSS to load custom fonts.

[dhowe]

all the functions listed above are now implemented for opentype (ttf, otf) fonts -- see the updated docs

[lmccart]

is this reopened because there's some part left to do or because you were leaving it for me to close? let's breakout the leftover part if there is one.

[dhowe]

just leaving for you to close, thanks