search

keycloakify / keycloakify

🔏 Keycloak theming for the modern web
https://www.keycloakify.dev
MIT License
1.52k stars 162 forks source link

Default theme throws console errors on firefox: "downloadable font: kern: Too large subtable" #548

Open corneliusroemer opened 4 months ago

corneliusroemer commented 4 months ago

On Firefox only, we get the following console error for all pages that use patternfly (probably all?)

It doesn't seem to negatively impact the page, so maybe it would be possible to simply throw out that font and all references to it loading it? The inclusion seems to be part of keycloakify, per a quick code search. Maybe you could patch patternfly.css to remove all requests to the OpenSans fonts, e.g. doing a find/replace for s#url("../fonts/OpenSans-[a-zA-Z]*-webfont.ttf")##

This is the console error, there's quite a lot of them, a bit unpleasant.

downloadable font: kern: Too large subtable (font-family: "Open Sans" style:normal weight:400 stretch:100 src index:3) source: https://authentication-main.loculus.org/resources/gfdpy/login/loculus/resources-common/node_modules/patternfly/dist/fonts/OpenSans-Regular-webfont.woff2

Found by switching on playwright erroring if it notices console errors

See: https://stackoverflow.com/questions/35206815/font-loading-error-downloadable-font-kern-too-large-subtable-table-discarded

I noticed patternfly has been discussed before in #https://github.com/keycloakify/keycloakify/issues/104

Repro: open https://cloud-iam.keycloakify.dev/realms/keycloakify/protocol/openid-connect/auth?client_id=starter&redirect_uri=https%3A%2F%2Fstarter.keycloakify.dev%2F%3FconfigHash%3D89c4de36&response_type=code&scope=openid+profile&state=61bbc8bd42784e139439906c24d64451&code_challenge=muSJCZ1rnC_91u_CkZwdvJtjqSawVYPJ15oD1vroLWo&code_challenge_method=S256&response_mode=query&ui_locales=en&my_custom_param=value%20of%20foo%20transferred%20to%20login%20page on Firefox

garronej commented 4 months ago

Hello @corneliusroemer,

Thank you for bringing this to our attention.

Unfortunately, the issue you've encountered is not unique to Keycloakify. Our default components are direct mirrors of the Keycloak default theme, and the problem you mentioned is also present there:

image

FWI a major update is on the horizon, which will synchronize our built-in pages with the latest Keycloak default theme. You can track the progress here: https://github.com/keycloakify/keycloakify/pull/538. Unfortunately, this update won't resolve the issue, as it persists in the latest version of Keycloak's builtin theme.

It seems the best course of action is to wait for the patternfly/keycloak team to address this issue on their end.

In the meantime, if you're working with a heavily customized theme, you might consider setting doUseDefaultCss to false in the Template props.

corneliusroemer commented 4 months ago

Opened an issue upstream at https://github.com/keycloak/keycloak/issues/29486

garronej commented 4 months ago

Thanks!

Well I didn't notice that they started updating the temlate again. I think they won't fix it on their end then and I won't migrate to Login v2 just yet since it's suseptible to changes.

I guess I'll have to patch it on my end then 😞