[UI] Google fonts loading prevent page render

Open dolfinus opened this issue 1 year ago • 1 comments

I'm running Marquez inside company network which has no direct internet access. Opening any page of Marquez UI leads to showing a blank page for ~15 seconds, and only then the UI is rendered as expected.

This is because HTML <head> tag contains:

<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Karla:400,700&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">

These URLs cannot be resolved without internet access, and after 15 seconds browser give up, and renders the page with default fonts. Because these fonts are in the <head> tag, browser cannot fetch them in the background.

Please consider one of these options:

use @font-face CSS rule with font-display fallback or swap
use FontFace JS class for lazy loading font files
include font files into the static bundle served by web container

Dec 17 '24 09:12 dolfinus

It seems like you are more of a font expert than I am! Is this a simple item for you to contribute so that we can ensure that it works how you expect in your environment? I agree that it's not ideal that we're doing this synchronous load attempt and not working under internetless conditions.

Dec 25 '24 02:12 phixMe