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.

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

fix(docs-infra): add swap to web fonts so downloading does not block… #35352

Closed
wants to merge 1 commit into from

Conversation

ajitsinghkaler
Copy link
Contributor

… rendering

Light house was reporting that 'Ensure text remains visible during webfont load' solution to this was adding & swap to the end o web fonts this leds to our first text showing before web-font download and improves the performance of out site link to article: https://web.dev/font-display/\?utm_source\=lighthouse\&utm_medium\=lr

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Web fonts block rendering.

Issue Number: N/A

What is the new behavior?

Web fonts won't block rendering while downloading.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@pullapprove pullapprove bot requested a review from gkalpak February 12, 2020 02:41
@ngbot ngbot bot added this to the needsTriage milestone Feb 13, 2020
@gkalpak gkalpak added action: review The PR is still awaiting reviews from at least one requested reviewer target: patch This PR is targeted for the next patch release type: bug/fix aio: preview labels Feb 14, 2020
@mary-poppins
Copy link

You can preview 4d879e9 at https://pr35352-4d879e9.ngbuilds.io/.

Copy link
Member

@gkalpak gkalpak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx, @ajitsinghkaler 👍
Please change the commit message to have fix as scope: fix(docs-infra): ...

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is an icon font, I don't think it makes sense to show a fallback font.

@gkalpak gkalpak added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Feb 14, 2020
@ajitsinghkaler ajitsinghkaler force-pushed the google-font branch 2 times, most recently from c666a92 to 26a452a Compare February 14, 2020 17:54
@ajitsinghkaler ajitsinghkaler changed the title feat(docs-infra): add swap to web fonts so downloading does not block… fix(docs-infra): add swap to web fonts so downloading does not block… Feb 14, 2020
@mary-poppins
Copy link

You can preview 26a452a at https://pr35352-26a452a.ngbuilds.io/.

@ajitsinghkaler
Copy link
Contributor Author

@gkalpak made the changes please have a look

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, based on this thread (and mentioned resources), I think display: block is the appropriate value for icon fonts (which will also make LightHouse happy):

Suggested change
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">

…ock rendering

Light house was reporting that 'Ensure text remains visible during webfont load' solution to this problem was adding &swap to the end of web fonts this leads to our first text showing before web-font download and improves the performance of site link to article: https://web.dev/font-display/\?utm_source\=lighthouse\&utm_medium\=lr
@mary-poppins
Copy link

You can preview 5ba991f at https://pr35352-5ba991f.ngbuilds.io/.

Copy link
Member

@gkalpak gkalpak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@gkalpak gkalpak added action: merge The PR is ready for merge by the caretaker and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels Feb 18, 2020
@alxhub alxhub closed this in 7b56daf Feb 18, 2020
alxhub pushed a commit that referenced this pull request Feb 18, 2020
…ock rendering (#35352)

Light house was reporting that 'Ensure text remains visible during webfont load' solution to this problem was adding &swap to the end of web fonts this leads to our first text showing before web-font download and improves the performance of site link to article: https://web.dev/font-display/\?utm_source\=lighthouse\&utm_medium\=lr

PR Close #35352
@ajitsinghkaler ajitsinghkaler deleted the google-font branch March 6, 2020 04:20
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 6, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker aio: preview cla: yes target: patch This PR is targeted for the next patch release type: bug/fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants