Font Library: How to add lib-font package (or equivalent).

[matiasbenedetto]

What ?

We need to add the lib-font package (or a better equivalent) to read font assets metadata in the Font Library.

Current situation:

We are adding the files library files in the codebase, adding minor changes:

See these how we are adding the library files on Font Library Frontend PR:
https://github.com/WordPress/gutenberg/tree/d01a98d03724c90fb08a47a2504608e52c78b800/packages/edit-site/lib

Context

In Create Block Theme plugin, we use the same library to read the font assets metadata (font name, font weight, font style, etc) without changing the library source code. To avoid compiling errors, we needed to add custom Webpack config options.

@youknowriad suggested that we should avoid changing the Webpack configuration file for Gutenberg. Because of that, we are using the bundling approach, changing a few things in the library's source code (see the comments in the Fonts Library frontend PR ).

More Context

Added a question in the lib-font repo about the Webpack bundling: Pomax/lib-font#135

Alternatives

It is not a requirement to use Lib-font. We can try another alternative.
The pros of this lib:

• It is used on Create Block Theme plugin, and it is working OK
• The most lightweight alternative I found.

The con seems to be this issue.

Tracking issue

#52698

[mikachan]

Do we have to bundle the package in Gutenberg? I'm wondering if we could call the lib-font functionality from a CDN like unpkg.com or jsDelivr, e.g. from https://www.unpkg.com/lib-font@2.4.0/lib-font.js / https://cdn.jsdelivr.net/npm/lib-font@2.4.0/lib-font.js.

[jeffikus]

As far as I'm aware, MIT license is compatible with the GPL, but I'm trying to find out more about this.

[youknowriad]

Judging by the response here Pomax/lib-font#135 (comment)

I wonder if it's possible to just do import lib-font/lib-font.browser.js (or something like that) and just rely on window.Font afterwards. (the path above is just an example though, you need to locate the right file in the node_modules).

[annezazu]

What's happening here for 6.5? Asking as it's caused some confusion for the core editor triage folks and I want to make sure it's in the right spot for the 6.5 release.

[youknowriad]

Looking at the code again, "lib-font" has been copied within the "lib" directory within the edit-site package. I think that works for now, obviously, the ideal scenario would be to not have to include these in our repo and avoid webpack custom config.

So I'm leaving this issue open but it's low priority now.