Salesforce LWC theme fonts

[gbrdhvndi]

Hi there, just so you know...

Preamble:

In the Winter'21 release Salesforce has rolled out a new critical update, "Secure Static Resources for Lightning Components".
https://releasenotes.docs.salesforce.com/en-us/winter21/release-notes/rn_lc_secure_static_resources_update.htm

Static Resource is a feature which allows developers to host any custom static content on the platform (images, stylesheets, scripts, etc.) and access them programmatically from the UI components.

Historically, everything on Salesforce was hosted on the same force.com domain but with the introduction of Lightning Experience (LEX) some new domains were introduced and Content Security Policy was enforced.

The new critical update brings one minor but significant change: all static resources will be hosted on the visualforce.com domain where as Lightning components are hosted on the lightning.force.com domain. With the Content Security policy enforced, this ensures no harm to be caused by a static resource to any LWC component.

The message:

The only two file types allowed to be loaded into LWC from a static resource are a script file and a stylesheet. This means that if a CSS file references any other items (images or fonts) stored in the same static resource, the Content Security Policy will deny access to those other files.

This means that Bryntum themes will fail to load any font file they might be referencing (like "Font Awesome").

Our team has created a custom theme for LWC, and we have worked around this issue by embedding all necessary font files into CSS as Base64 encoded data URLs.

Since you are now offering LWC compatibility out of the box, I just wanted to let you know about this issue.

Kind regards,
Aleksei

[Maxim Gorkovsky]

Hello.
Thank you for the update. I opened issue to investigate this: https://github.com/bryntum/support/issues/1921

[gbrdhvndi]

If you are interested, I've used a postcss-loader with postcss-inline-base64 plugin:

Declaration:

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: $fa-font-display;
  src: url('b64---#{$fa-font-path}/fa-solid-900.woff2---') format('woff2');
}

Webpack config:

{
    loader: 'postcss-loader',
    options: {
        sourceMap: false,
        postcssOptions: {
            plugins: [
                [
                    'postcss-inline-base64',
                    { baseDir: `./${THEME_DIR}/` },
                ],
            ],
        },
    },
},

[Maxim Gorkovsky]

Yes, we are interested. Thank you for sharing your solution.