Issue with font loading on the Vault SSO SDK

[attack-monkey]

Using Parcel as the Bundler for Web Application, I got the following error:

@parcel/core: No transformers found for
_Sites/pingle2/client/node_modules/@verida/account-web-vault/dist/assets/fonts/Sora-Regular.ttf_.

  /Users/benjaminclark/Sites/pingle2/client/node_modules/@parcel/config-default/index.json:3:3
     2 |   "bundler": "@parcel/bundler-default",
  >  3 |   "transformers": {
  >    |   ^^^^^^^^^^^^^^^^^
  >  4 |     "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  5 |     "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  6 |     "data-url:*": ["...", "@parcel/transformer-inline-string"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  7 |     "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  8 |       "@parcel/transformer-worklet",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  9 |       "..."
  >    | ^^^^^^^^^^^
  > 10 |     ],
  >    | ^^^^^^
  > 11 |     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 12 |       "@parcel/transformer-babel",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 13 |       "@parcel/transformer-js",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

I resolved the error by adding a .parcelrc with the following, to get it to build.

{
    "extends": "@parcel/config-default",
    "transformers": {
        "*.ttf": [
            "@parcel/transformer-raw",
        ],
    },
}

It now builds but the font is displaying as times new roman and I can the the following errors in the browser console...

• Failed to decode downloaded font: http://localhost:1234/undefined
• OTS parsing error: invalid sfntVersion: 1008813135

[nick-verida]

@cmcWebCode40 I think that the .ttf font isn't getting packaged by webpack properly here perhaps.

[cmcWebCode40]

@nick-verida, yes you're right parcel-bundler is not packaging the .ttf fonts styles correctly, I think this issue is related to this one raised here https://github.com/parcel-bundler/parcel/issues/5305.

There is a solution to that issue but that works if we use parcel-bundler to package our library but that is not the case here, so I would suggest we use other methods to load the google font so it can work well on different javascript applications.

cc @tahpot

[tahpot]

@cmcWebCode40 Sorry, I can't add much value here. The solution for now may be to add a README.md entry highlighting this issue with parcel-bundler and the solution.

@attack-monkey Do you have any thoughts on a solution that can allow fonts to be loaded across multiple packaging tools?