[Feature]: Self hosting fonts

keyurparalkar commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Summary

A user has requested to load the google fonts from different CDN to optimize the loading speed.

Front link: https://app.frontapp.com/inboxes/teams/folders/15896140/unassigned/70477439692 Slack Thread: https://theappsmith.slack.com/archives/C0341RERY4R/p1675403397627839

Why should this be worked on?

By self-hosting the google fonts we can optimize the loading speed.

somangshu commented 1 year ago

@SatishGandham I remember this was being discussed, where we said loading static resources from CDN will help resolve network latency we see today to some extent. Is this a similar issue?

cc @ichik @jsartisan this might be relevant to WDS

ichik commented 4 months ago

Copying over relevant info from the linked issue.

Some links explaining why self-hosting (and preloading, sub-setting binaries, and using variable fonts wherever possible + a bunch other tricks) is preferable to using Google Fonts: https://evilmartians.com/chronicles/the-joy-of-variable-fonts-getting-started-on-the-frontend https://pimpmytype.com/variable-font-fallback/ https://wpspeedmatters.com/self-host-google-fonts/ https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/

Nice CLI tool for sub-setting binaries: https://github.com/zachleat/glyphhanger

Sample code for self-hosting:

/* Variable fonts */
/* English */
@font-face {
    font-family: 'FooV';
    font-weight: 400 700; /* Whatever's actually in the font file, same for font-style */
    font-display: swap; /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#values */
    font-style: oblique 0deg 10deg;
    src: url('https://foo.bar/fonts/en.var.woff2') format('woff2');
    unicode-range: U+0020-007F, U+AB, U+BB;
}
/* Cyrillic */
@font-face {
    font-family: 'FooV';
    font-weight: 400 700;
    font-display: swap;
    font-style: oblique 0deg 10deg;
    src: url('https://foo.bar/fonts/cyr.var.woff2') format('woff2');
    unicode-range: U+401, U+404, U+406, U+407, U+410-44F, U+451, U+454, U+456, U+457, U+490, U+491;
}

...

/* Duplicating this all for all needed Unicode ranges */

/* Non-variable fonts */
/* English */
@font-face {
    font-family: 'Foo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://foo.bar/fonts/en.regular.woff2') format('woff2');
    unicode-range: U+0020-007F, U+AB, U+BB;
}
@font-face {
    font-family: 'Foo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://foo.bar/fonts/cyr.regular.woff2') format('woff2');
    unicode-range: U+0020-007F, U+AB, U+BB;
}

...

/* Duplicating for all necessary weights and styles and Unicode ranges*/

/* Declaring a fallback */

@font-face {
    font-family: 'Foo-Fallback';
    size-adjust: 109.71%;
    src: local('Arial'); /* Arial is the most available fallback for sans-serifs. ref: http://fontfamily.io */
}

/* Applying variable when supported */
* {
    font-family: 'Foo', 'Foo-Fallback', sans-serif;
}

@supports (font-variation-settings: normal) {
    * {
        font-family: 'FooV', 'Foo-Fallback', sans-serif;
    }
}

Links for defining and previewing Unicode ranges:

Preloading directives for <head>:

<!-- if we're loading from some other place -->
<link rel="preconnect" href="https://foo.com" crossorigin>
<!-- Prefetching the binary before the stylesheet -->
<link rel="preload" href="https://foo.com/bar.woff2" as="font" type="font/woff2" crossorigin>
<!-- Typography-related CSS should be requested after -->
<link rel=stylesheet" href="typography.css">

ame-appsmith commented 1 month ago

Another user requested this feature.

deepblue commented 1 month ago

@keyurparalkar @ichik Is there any update on this issue? We are using a self-hosted Appsmith in a private network without public internet access. This causes a 10-second delay when loading pages, making Appsmith difficult to use. I hope we can resolve this or at least make it non-blocking for the initial page load. Thanks!

deepblue commented 4 weeks ago

@keyurparalkar @ichik Just checking in on this issue. The 10-second delay in our self-hosted setup is a big blocker for us to fully adopt Appsmith. Any insights or updates would be really appreciated. Sorry to bother you, and thanks for your help!

ichik commented 4 weeks ago

@deepblue could you please check the following: setting System Default in the app's theme so that the local fonts are used in the app?

I would also recommend you check the network configuration of your airgapped network. Font loading is not a blocking request in any case, so it should not lead to any delays with loading apps.

deepblue commented 2 weeks ago

@ichik Thank you for your response.

We have set the theme to System Default in the app’s settings, as shown below:

An example of a blocking issue can be seen with the following font loading: https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap

I suspect this is caused by an imported CSS from the main.css

@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap);

ichik commented 2 weeks ago

@deepblue the imports from Google APIs have been removed recently: #35392 Can you check if you're running the latest release of Appsmith?

appsmithorg / appsmith