musangowope
commented
2 years ago We are going to have to go with the latter approach: How I led to this decision was a result of following:
- Followed a guide to load custom fonts with webpack https://www.robinwieruch.de/webpack-font
setting up the loader in webpack, placing local fonts in the dir, setting up font faces in
la-akoma-ntoso.scss, testing the whether the font rendered. it did not. (Checking in network tab) -
Looked for example of loading local custom font for a stencil component and came across this thread https://github.com/ionic-team/stencil/issues/2072#issuecomment-581517574
There's currently no way to load custom fonts at all from within a shadow DOM. If you want to hack around the issue you can inject the required css into the
tag on component load.
So in the case of africanlii rendering from pocketlaw in the iframe, load fonts from africanlii
longhotsummer
Can we use webpack to embed external fonts into bundle.js, so that everything is included in that file?
Alternatively, consumers that need everything downloaded statically must explicitly link to the fonts we use (which we should document).