Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reduce FOUT #21427

Open
KelvinOm opened this issue Mar 15, 2023 · 5 comments
Open

Reduce FOUT #21427

KelvinOm opened this issue Mar 15, 2023 · 5 comments
Labels
Anvil Pod Issue related to Anvil project Task A simple Todo WDS team

Comments

@KelvinOm
Copy link
Collaborator

It is necessary to find and propose a solution to avoid FOUT(Flash of Unstyled Text) for apps and editor.

Possible solutions:

  1. Self-hosting of the fonts
  2. Google Fonts Preloading
@ichik
Copy link
Contributor

ichik commented Mar 15, 2023

Some relevant 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/

@ichik
Copy link
Contributor

ichik commented Mar 15, 2023

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

@ichik
Copy link
Contributor

ichik commented Mar 15, 2023

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:

@ichik
Copy link
Contributor

ichik commented Mar 15, 2023

Related: #20365

@ichik ichik changed the title Get rid of font FOUT Reduce FOUT Mar 24, 2023
@ichik
Copy link
Contributor

ichik commented Mar 24, 2023

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">

@jsartisan jsartisan added the Anvil Pod Issue related to Anvil project label Mar 31, 2023
@github-actions github-actions bot removed the Anvil Pod Issue related to Anvil project label Mar 31, 2023
@github-actions github-actions bot added Anvil Pod Issue related to Anvil project Widgets Product This label groups issues related to widgets labels Mar 31, 2023
@somangshu somangshu added the Performance Issues related to performance label Apr 3, 2023
@github-actions github-actions bot added the Performance Pod All things related to Appsmith performance label Apr 3, 2023
@Nikhil-Nandagopal Nikhil-Nandagopal added the Task A simple Todo label Mar 1, 2024
@github-actions github-actions bot removed the Widgets Product This label groups issues related to widgets label Mar 1, 2024
@KelvinOm KelvinOm removed Performance Pod All things related to Appsmith performance WDS - widget styling Performance Issues related to performance labels Mar 28, 2024
@ichik ichik mentioned this issue Apr 29, 2024
Open
1 task
@ichik ichik mentioned this issue Jun 28, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Anvil Pod Issue related to Anvil project Task A simple Todo WDS team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@ichik @Nikhil-Nandagopal @jsartisan @somangshu @KelvinOm