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

Self host fonts #21

merged 3 commits into from Jan 25, 2017


None yet
2 participants
Copy link

KyleAMathews commented Jan 25, 2017

Been working on a little side project to push google fonts to npm to make it really easy to self-host fonts. This makes for a nice little speed index boost as it avoids the extra ssl negotiation to google fonts + the extra round trip to first grab their css file and then download the fonts. Instead the fontface css is embedded directly in the <head>.

I also used the new link preload fetch directive (only supported on chrome atm) which instructs the browser to immediately start downloading the font file (normally browsers wait to see if the font is actually used in the html on the page before downloading).

Speed index savings seem around ~300 milliseconds on desktop/cable & ~1.5 seconds on smartphone/3g.

I also switched the various icons to use file-loader vs. the default url-loader as currently we're base64 encoding icons in the HTML which is wasted bytes.




KyleAMathews added some commits Jan 25, 2017

Self-host our fonts + preload main header/body font
Also in this commit is forcing using file-loader on icons
as currently we're inlining them which is wasteful as most aren't used
nor are they latency sensative.

vcarl approved these changes Jan 25, 2017

Copy link

vcarl left a comment

Nice, I hate font pop in and it's noticeably better on this PR than on the site. Great work.


This comment has been minimized.

Copy link

KyleAMathews commented Jan 25, 2017

Sweet, merging!

@KyleAMathews KyleAMathews merged commit e8c4493 into reactiflux:master Jan 25, 2017

1 check passed

deploy/netlify Deploy preview ready!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment