FLUID-6499: added font display swap for font faces

[TeddTech]

Description

Leverages the font-display CSS feature to ensure text is user-visible while webfonts are loading.

Steps to test

1. Go to a webpage implementing UIO
2. inspect the page
3. go to audit tab and run lighthouse

Expected behavior:

Ensure text remains visible during webfont load should no longer come up under Diagnostics because it has already been applied.

Additional information

N/A

Related issues

https://issues.fluidproject.org/browse/FLUID-6499

[idrc-cms-bot]

Could one of the admins verify that these changes are reasonable to test? If so, please reply with "ok to test".

[cindyli]

ok to test

[cindyli]

@TeddTech, thanks for the pull request.

All commit messages into the infusion repository also need to be prefixed with the jira number in the format such as "FLUID-6499: add ...", like what you've done for the pull request title.

Please change commit messages too. Thanks.

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/403/

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/404/

[TeddTech]

@TeddTech, thanks for the pull request.

All commit messages into the infusion repository also need to be prefixed with the jira number in the format such as "FLUID-6499: add ...", like what you've done for the pull request title.

Please change commit messages too. Thanks.

will do

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/405/

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/406/

[sachin10101998]

@TeddTech, there's something terribly wrong with the commits in your PR. The commit
7138650 to 19c8943 have already been merged to master and they should not be present here. This is probably because you didn't sync your fork with the master before sending a PR or the head was not correctly set before you sent PR. You can't edit commits after a PR has been sent, but you can keep a check on commits by using GUI clients like smartGit.

[TeddTech]

@TeddTech, there's something terribly wrong with the commits in your PR. The commit
7138650 to 19c8943 have already been merged to master and they should not be present here. This is probably because you didn't sync your fork with the master before sending a PR or the head was not correctly set before you sent PR. You can't edit commits after a PR has been sent, but you can keep a check on commits by using GUI clients like smartGit.

I did a rebase removing the duplicate commits and only keeping my own

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/407/

[sachin10101998]

Check review below

[sachin10101998]

Add ';' here.

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/408/

[jobara]

@TeddTech could you please update your last commit message to be in the correct format, similar to your previous commits.

[jobara]

@TeddTech also, it's best practice to file a PR from a working branch, rather than using your master branch. For example if you needed to file another PR against the repository, you may accidentally include changes from this PR because it's from your master, and it's harder to keep things clean in general.

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/409/

[TeddTech]

@TeddTech also, it's best practice to file a PR from a working branch, rather than using your master branch. For example if you needed to file another PR against the repository, you may accidentally include changes from this PR because it's from your master, and it's harder to keep things clean in general.

Thanks for the info @jobara. Will do from now on

[jobara]

@TeddTech and @cindyli I left a comment on the JIRA.

[TeddTech]

The purpose of this PR is to improve performance of websites that integrate infusion. At todays We Count check-in it was decided that leaving font-display as its default value (auto) would be best.

The value for PrefsFramework-Icons.woff in the src/framework/preferences/css/stylus/PrefsEditor.styl file may still need to change because the lighthouse performance test throws a Ensure text remains visible during webfont load error for this font.

[cindyli]

The purpose of this PR is to improve performance of websites that integrate infusion. At todays We Count check-in it was decided that leaving font-display as its default value (auto) would be best.

The value for PrefsFramework-Icons.woff in the src/framework/preferences/css/stylus/PrefsEditor.styl file may still need to change because the lighthouse performance test throws a Ensure text remains visible during webfont load error for this font.

Just to add a couple of clarifications about outcomes from today's WeCount check in:

1. For font faces defined for font icons, using the browser font-display: auto; is preferable because there aren't fallbacks for them. This means, @TeddTech, please update this pull request to remove font-display: swap; for this category. PrefsFramework-Icons.woff in the src/framework/preferences/css/stylus/PrefsEditor.styl is one of them;

2. For font faces defined for text fonts, designer's input is needed to decide what user experience is preferred. This pull request will be updated once the decision is made.

[idrc-cms-bot]

CI job passed: https://ci.fluidproject.org/job/infusion-pull-request/416/