Fonts sometimes don't load

[Latrolage]

Official Instance

• [ ] The bug is reproducable on the official hosted instance or is API related.

Describe the bug

Sometimes, the fonts for the buttons do not load and i am stuck with alt text. CORs block. problem on my nginx server or your webserver configuration?

To Reproduce

Can't be consistently reproduced.

Refreshing the page with ctrl+shift+r (which i believe bypasses browser cache) makes it load up the button images properly.

Expected behavior

Fonts should load consistently

Logs/Errors

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fonts.kavin.rocks/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxP.ttf. (Reason: CORS request did not succeed). Status code: (null).

downloadable font: download failed (font-family: "Roboto" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://fonts.kavin.rocks/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxP.ttf
Failed to load ‘https://fonts.kavin.rocks/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxP.ttf’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://fonts.kavin.rocks/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxP.ttf","error":{}}]’. [workbox-387ab1b0.js:1:212](https://piped.diystp.com/workbox-387ab1b0.js)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fonts.kavin.rocks/s/materialiconsround/v99/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf. (Reason: CORS request did not succeed). Status code: (null).

downloadable font: download failed (font-family: "Material Icons Round" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://fonts.kavin.rocks/s/materialiconsround/v99/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf
Failed to load ‘https://fonts.kavin.rocks/s/materialiconsround/v99/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://fonts.kavin.rocks/s/materialiconsround/v99/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf","error":{}}]’. [workbox-387ab1b0.js:1:212](https://piped.diystp.com/workbox-387ab1b0.js)

Browser, and OS with Version.

Firefox nightly 101.0a1 (2022-04-19) (64-bit) Arch linux

Additional context

[Latrolage]

Related #658

[IkelAtomig]

I think adding the Font file as a part of the package would solve the issue.

[Myned]

For me, all page refreshes, cache or no, results in CORS errors when trying to load the player buttons. I was able to work around this with a docker nginx instance behind caddy using a default header.

Caddyfile:

piped.domain.tld, api.piped.domain.tld, proxy.piped.domain.tld {
    # Allow remote fonts
    header ?Access-Control-Allow-Origin "*"

    reverse_proxy localhost:8080
}

The problem stems from the remote fonts, as noted, so adding the Access-Control-Allow-Origin header where it is missing (when the request's Host is fonts.kavin.rocks) allows the remote fonts to load properly. A default header is needed because caddy adds a duplicate header even when it is supposed to replace it - not sure if that's a bug.

Ideally, the fonts should not be pulled from an external source for a selfhosted instance to begin with, but this works well enough for my usecase.

[Myned]

I misinterpreted the exact CORS error associated with this issue in my previous comment. After applying the default header, I now experience the occasional CORS request did not succeed error in the console, fixed by force-refreshing the page.

[ProfessorCode212]

I also have this exact problem on the official https://piped.kavin.rocks instance.

I used Piped on Firefox for Android and it worked fine then. I am not sure why this happens on the desktop.

Browser: Firefox Browser Version: 101.0.1

[Dominion0815]

Is it possible to store font files local? I also encounter the font problem on https://piped.kavin.rocks/ with Firefox 104.0.2 (64-Bit).

STRG+F5 fixes the problem in this Tab.

Fehler beim Laden von 'https://fonts.kavin.rocks/s/materialiconsround/v107/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf'. Ein ServiceWorker hat eine mit 'Error: no-response :: [{"url":"https://fonts.kavin.rocks/s/materialiconsround/v107/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf","error":{}}]' abgelehnte Promise an FetchEvent.respondWith() übergeben. [workbox-a0a95ca5.js:1:212](https://piped.kavin.rocks/workbox-a0a95ca5.js)
Fehler beim Laden von 'https://fonts.kavin.rocks/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf'. Ein ServiceWorker hat eine mit 'Error: no-response :: [{"url":"https://fonts.kavin.rocks/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf","error":{}}]' abgelehnte Promise an FetchEvent.respondWith() übergeben. [workbox-a0a95ca5.js:1:212](https://piped.kavin.rocks/workbox-a0a95ca5.js)
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://fonts.kavin.rocks/s/materialiconsround/v107/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

downloadable font: download failed (font-family: "Material Icons Round" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://fonts.kavin.rocks/s/materialiconsround/v107/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://fonts.kavin.rocks/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

downloadable font: download failed (font-family: "Roboto" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://fonts.kavin.rocks/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf

[Dominion0815]

Found CORS solution: Firefox Addons might brick the font loading! oO