Ability to overwrite or ignore css and/or fonts

[jchabotamica]

Describe the feature request

We have a react application built with webpack. I'd like to ignore the css from the okta-signin-widget node module and its font files. We would apply our own internal fonts by overwriting the css. The problem is that these cause unnecessary network calls to download the extra css (a lot of which is unused) and font files (not used at all).

New or Affected Resource(s)

okta-signin-widget@latest

Provide a documentation link

No response

Additional Information?

No response

[jchabotamica]

Currently there are multiple issues I see with how we handle these customizations.

1. We include the okta-sign-in.min.css file in our React component which rends the widget.
2. We have load our own css files with css selectors which overwrite a lot of these styles
3. The okta-sign-in.min.css file is very large at 231.8 KB compressed
4. This then downloads THREE additional woff files which we don't use as we have our own fonts and overwrite your font families in our custom css file. These block text from displaying also.

Should we be editing the okta-sign-in.min.css file directly instead?

[shuowu-okta]

@jchabotamica Thanks for reporting the issues!

Internal Ref: OKTA-644932

[jchabotamica]

@shuowu-okta thanks! Let me know if my request makes sense or not. Happy to provide any clarity.