search

source-foundry / Hack

A typeface designed for source code
http://sourcefoundry.org/hack/
Other
16.37k stars 612 forks source link

Add font-display property #470

Closed jbhannah closed 4 years ago

jbhannah commented 5 years ago

Allows for faster rendering while waiting for fonts to download, per recommendations from Lighthouse audit on decreasing time-until-rendered.

chrissimpkins commented 5 years ago

Thank you! Can I ask you to link the documentation of benefits that you are referring to?

jbhannah commented 5 years ago

Sure, I've added a link in the PR description. Specifically, setting font-display: swap tells the browser to draw the text immediately, and swap in the custom font face once the browser finishes downloading it from the server. The font packages in the KyleAMathews/typefaces repo also use this technique.

chrissimpkins commented 5 years ago

Thanks Jesse! I will check it out this weekend. Really appreciate this information and the PR!

jbhannah commented 5 years ago

Not a problem! Both this and my other PR are things I came across in converting my homepage to use self-hosted fonts and doing other performance optimizations, and figured they'd be worth giving back.

chrissimpkins commented 5 years ago

figured they'd be worth giving back

Thanks Jesse! I greatly appreciate it!

I haven't had a chance to read the Lighthouse document that you linked yet but should be able to get to it this week. Will prioritize your PR that fixes the incorrect web font subset paths in both the CSS and the CSS template files for a patch that we push to npm so that this fix is available. Be back in touch about the proposal here when I have a chance to inform myself about the change that you are making.