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

Feature request: Set font-display rule to block to make Lighthouse happy #72

Open
thetwopct opened this issue Mar 25, 2021 · 3 comments · May be fixed by #99
Open

Feature request: Set font-display rule to block to make Lighthouse happy #72

thetwopct opened this issue Mar 25, 2021 · 3 comments · May be fixed by #99

Comments

@thetwopct
Copy link

Is it possible to update the font-display to block instead of auto to fix the "Ensure text remains visible during webfont load" in Google Lighthouse performance analysis?

FontAwesome have done similar.

@font-face {
  font-family: 'Line Awesome Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("../fonts/la-brands-400.eot");
  src: url("../fonts/la-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/la-brands-400.woff2") format("woff2"), url("../fonts/la-brands-400.woff") format("woff"), url("../fonts/la-brands-400.ttf") format("truetype"), url("../fonts/la-brands-400.svg#lineawesome") format("svg"); }

.lab {
  font-family: 'Line Awesome Brands'; }
@font-face {
  font-family: 'Line Awesome Free';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("../fonts/la-regular-400.eot");
  src: url("../fonts/la-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/la-regular-400.woff2") format("woff2"), url("../fonts/la-regular-400.woff") format("woff"), url("../fonts/la-regular-400.ttf") format("truetype"), url("../fonts/la-regular-400.svg#lineawesome") format("svg"); }

@font-face {
  font-family: 'Line Awesome Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../fonts/la-solid-900.eot");
  src: url("../fonts/la-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/la-solid-900.woff2") format("woff2"), url("../fonts/la-solid-900.woff") format("woff"), url("../fonts/la-solid-900.ttf") format("truetype"), url("../fonts/la-solid-900.svg#lineawesome") format("svg"); 
}

Thanks 🙏
@benmcm1994
Copy link

+1

2 similar comments
@sroy-dev
Copy link

+1

@felipeacelino
Copy link

+1

jkrrv added a commit to jkrrv/line-awesome that referenced this issue Mar 7, 2023
@jkrrv
change font-display to block
af0b98f 
Block is probably the best option, as discussed here: https://stackoverflow.com/questions/49461308/correct-font-display-value-for-icon-fonts
closes icons8#72.
@jkrrv jkrrv linked a pull request Mar 7, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Change font-display to block jkrrv/line-awesome
4 participants
@thetwopct @benmcm1994 @felipeacelino @sroy-dev