search

adobe-fonts / source-serif

Typeface for setting text in many sizes, weights, and languages. Designed to complement Source Sans.
https://adobe-fonts.github.io/source-serif
SIL Open Font License 1.1
2.17k stars 163 forks source link

adding swap #78

Closed charliewilco closed 4 years ago

charliewilco commented 4 years ago

Adds font display for better performance

more details: https://css-tricks.com/font-display-masses/

frankrolf commented 4 years ago

Thank you! Interesting. Following the link you sent, I read:

Fallback text is immediately rendered in the next available system typeface in the font stack until the custom font loads, in which case the new typeface will be swapped in. This is what we want for stuff like body copy, where we want users to be able to read content immediately.

This is not what we’d want on a font specimen page – or am I misunderstanding something here? Thanks again!

charliewilco commented 4 years ago

Yes that is true, but that holds true of all your CSS, without the added property, that blocks the rendering of your websites content and hurts the performance and time to the first meaningful paint in the browser.

So while that might the desired behavior for your specimen, as a consumer of this npm package, wanting to use this font in my project, that's less than ideal because my content set in this font is waiting for that font file to download and cache.

charliewilco commented 4 years ago

perhaps a better approach would be to have a CSS file for the specimen and one for projects in production.

frankrolf commented 4 years ago

Understood. One request – could you modify your commit in a way that not every line seems changed? It is likely your code editor just made a whitespace substitution.

Thanks!

charliewilco commented 4 years ago

@frankrolf you got it!