Embed font + LICENSE in a third-party library using current JavaScript bundlers

15 hours ago 1
ARTICLE AD BOX

I usually use @fontsource/{font} NPM packages for open-source fonts, but it happens one open-source font I like to use for code sections isn't that popular and isn't anywhere on NPM. I need to embed that font in an UI component library, but for legal use I must include the license file (that includes the copyright).

I'm using the Vite.js bundler.

Considerations:

@font-face CSS module + import license from "./LICENSE"; void(license); - Results in something like: <wwwroot> assets/ 70efa15.woff2 64aba10 (LICENSE)

As you can see I also lose directory structure; everything looks decentralized.

public/. Does not work in NPM libraries; it only works for final consumer apps. At least I've tried it with a file: dependency, then entered localhost:XXXX/Nothing-License.txt and got redirected to the index.

About the reasoning behind hashing and directory-structure-reversal (decentralization) of import assets: I understand it might help forcing no-cache, but AFAIK one can just force no-cache at the HTTP server. IMO embedded files should follow a destination path like <wwwroot>/com.company.framework/Embed/{npm_package_name}/{source_directory}/{filename}.

Read Entire Article