search

detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

Ugyldig fallback-skrifttype (font-family): "system"? #230

Open mf-fx opened 2 months ago

mf-fx commented 2 months ago

Hej!,

Jeg sidder som udvikler på OS2borgerPC, der bruges på publikumsmaskiner i en stor del af de danske kommuner. Vi har hørt fra nogle af disse kommuner, at de har problemer med at indlæse https://www.bygogmiljoe.dk fra deres publikumsmaskiner. Problemet opleves ved at siden hænger i 3½ minut og så timer den ud, og det virker til at være relateret til skrifttyper.

De ser disse fejl i udvikler-konsollen:

downloadable font: download failed (font-family: "IBMPlexSans" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: https://www.bygogmiljoe.dk/IBMPlexSans-Regular.4de1b5f31f9c515ff240.woff
Loading failed for the <script> with source “https://www.bygogmiljoe.dk/assets/js/vendor/tinymce/js/tinymce/tinymce.min.js”. [www.bygogmiljoe.dk:14:71](http://www.bygogmiljoe.dk:14:71)
Content-Security-Policy: Ignoring ‘unsafe-eval’ or ‘wasm-unsafe-eval’ inside “script-src-elem”.
Error: Uncaught (in promise): x: {"headers":{"normalizedNames":[],"lazyUpdate":null,"headers":[]},"status":0,"statusText":"Unknown Error","url":"https://api.bygogmiljoe.dk/resourcer/tekster","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://api.bygogmiljoe.dk/resourcer/tekster: 0 Unknown Error","error":{"isTrusted":true}}

Jeg skal være ærlig at sige, at jeg ikke pt. ved hvordan denne fejl opstår konkret i detaljer. OS2borgerPC kan som udgangspunkt fint indlæse siden, og maskinerne har netforbindelse, så det undrer mig det ikke lykkes at hente IBM Plex Sans på disse maskiner. Problemet må være i netværsopsætningen og/eller i bygogmiljoe's kildekode, som formentligt ikke er relateret til det fælles designsystem.

Ift. dét er min plan er at vi I OS2borgerPC sørger for at indbygge skrifttypen IBM Plex Sans fremover, men derudover tænker jeg, at en anden årsag til problemet er, at den givne "fallback" font-family så vidt jeg kan læse mig til er ugyldig.

Ugyldig fallback skrifttype?

Fallback font-family-værdien er "system", men hvis man kigger på eksempelvis følgende side omkring gyldige "generic font families" er "system" ikke på listen: https://drafts.csswg.org/css-fonts/#generic-font-families

Ligeledes er det så vidt jeg kan læse er "system" heller ikke navnet på en specifik indbygget skrifttype: https://en.wikipedia.org/wiki/Core_fonts_for_the_Web https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows

Jeg tænker måske i stedet intentionen har været, at det skulle være "system-ui"? Alternativt kunne det være "sans-serif". Hvis der ikke ønskes en fallback-skrifttype er det nok om ikke andet bedre ikke at specificere én, der er ugyldig?

Jeg kan se "system" specificeret som font-family i følgende filer:

Ud over Byg og Miljø kan jeg se det også gælder følgende side: https://mitsygefravaer.dk/ https://nemlog-in.mitid.dk/login/mitid (de har IBM Plex Sans som primær font, efterfulgt af "system" som "fallback" - men de har også "sans-serif" som anden "fallback")

Borger.dk startsiden ser dog ikke ud til hverken at bruge IBM Plex Sans eller at have "system" som fallback.

Venligst, Marcus

detfaellesdesignsystem commented 2 months ago

Hej @mf-fx

Tak for din henvendelse!

"system" er en custom font specificeret med font-face - det er derfor, du ikke finder den nævnt nogen steder. Dvs. i filen dist/css/dkfds-borgerdk.css er det faktisk fonte nævnt i linje 222, som anvendes, når man laver fallback til "system".

Dog giver det fint mening også at have en "klassisk" fallback-font (sans-serif), hvilket vi har tilføjet i næste release, så tak for at påpege dette.

Angående din fejl, så skal jeg ikke lige kunne sige, hvad problemet skyldes. Når jeg går ind på https://www.bygogmiljoe.dk/, så kan jeg se, at der fint er lagt fonte, stylesheets og scripts ind på sitet (dette har jeg tjekket med Chrome's developer tools --> Sources-faneblad --> Page-faneblad).

Med venlig hilsen Helle Juhl Det Fælles Designsystem

mf-fx commented 2 months ago

Hej @detfaellesdesignsystem

Tak for at I kigger på det!

Aha, dér er forklaringen. Det giver mening.

Jeg er rigtig glad for at høre, at I tilføjer en fallback-font, hvis de andre ikke skulle være tilgængelige!

Når der er åbnet for HTTP og HTTPS undrer det også mig, at det kan gå galt med indlæsningen på deres netværk (mon de filtrerer på "content-type"?), men fremover vil siden måske kunne indlæse selv med disse strikse netværksregler. Næste spørgsmål er så om deres "Byg og Miljø Ikoner"-skrifttype også skulle vise sig at give samme problem. Det må jeg høre Byg og Miljø om i så fald.

I kan bare lukke sagen for mit vedkommende.

Venligst, Marcus