search

KyleAMathews / typefaces

NPM packages for Open Source typefaces
2.6k stars 91 forks source link

Offline loading introduces jitter #47

Closed smallstepstoday closed 6 years ago

smallstepstoday commented 6 years ago

Firstly, Thank You for the thought leadership in making these libraries. I am in the process of doing a side-by-side comparison between Create React App and Gatsby, and in that process I am running into a couple of technical issues. Most likely these are simply a matter of the difference between SSR and CSR approaches.

I loaded Ubuntu/Open Sans typefaces and required them in the layout. Magically they are included in the HTML. So far so good. Now when a page is served, it is served first with the user agent font style, Arial, Helvetica, whatever... and then once the font is done loading offline, the font is switched. The span of time is just long enough to introduce a noticeable jitter. At least is does using on Chrome 62.0.3202.94.

When using Google Fonts the (browser-dependent) effect is to have a space reserved where the text shows up. That seems preferable if the rest of the layout completes while the font is loading.

How do I address this for mobile/slow network users going forward?

KyleAMathews commented 6 years ago

You can control this with font-display https://css-tricks.com/font-display-masses/

smallstepstoday commented 6 years ago

It would be cool if typefaces made this configurable... I think one's only option right now is to meddle with the css file in node_modules. Is that correct?

KyleAMathews commented 6 years ago

No just override the css.

smallstepstoday commented 6 years ago

:flushed: Doh! Long day... too few cycles.

The only reason this was an issue is that this caught me while migrating from CRA to Gatsby (a move I'm glad to have made BTW). I needed to be clear why the difference... The jitter is not present on essentially identical code deployed in CRA... Thanks for the pointers and the excellent framework!

KyleAMathews commented 6 years ago

Perhaps you just upgraded the version of the package as older versions of typeface didn't have this CSS setting.

samselikoff commented 4 years ago

Sorry to necro this but I'm having a hard time + could use an example...

Are you saying to do this we need to take ownership of the css and change the font-display property? (I'm using Inter in Gatsby so I'm just doing import "typeface-inter" and wondering if there's a way to just tweak the font-display property without having to copy over everything else).