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

Font optimizations #62

Merged
merged 1 commit into from Nov 21, 2017

Conversation

Projects
None yet
3 participants
@zachleat
Contributor

zachleat commented Nov 21, 2017

  • Removes old formats that aren’t needed anymore (WOFF2/WOFF are most important, TTF for old androids)
  • Adds WOFF2 saving a bunch of KB
  • Adds zopfli encoding to WOFF to save a few KB
  • Subsets both fonts saving a bunch of KB
  • Uses font-display: swap to get rid of FOIT (in Chrome, soon in FF)
  • Uses preload to make fonts fetch and render faster (in Chrome, soon in FF)
  • Updates serviceworker to use WOFF2 only (all browsers that support sw support woff2)
Adds WOFF2 saving a bunch of KB
Adds zopfli encoding to WOFF to save a few KB
Subsets both fonts saving a bunch of KB
Uses font-display: swap to get rid of FOIT (in Chrome, soon in FF)
Uses preload to make fonts fetch and render faster (in Chrome, soon in FF)
Updates serviceworker to use WOFF2 only (all browsers that support sw support woff2)
@jennschiffer

This comment has been minimized.

Show comment
Hide comment
@jennschiffer

jennschiffer Nov 21, 2017

Owner

u rule 🎅

Owner

jennschiffer commented Nov 21, 2017

u rule 🎅

@jennschiffer jennschiffer merged commit 019b4c4 into jennschiffer:master Nov 21, 2017

@zachleat

This comment has been minimized.

Show comment
Hide comment
@zachleat

zachleat Nov 21, 2017

Contributor

if you ever have to make changes to this later, I documented what I did here https://www.zachleat.com/web/23-minutes/

Contributor

zachleat commented Nov 21, 2017

if you ever have to make changes to this later, I documented what I did here https://www.zachleat.com/web/23-minutes/

@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<title>make 8-bit art!</title>
<link rel="preload" href="/assets/fonts/8bit-Art-Sans-subset.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/VT323-Regular-subset.woff2" as="font" type="font/woff2" crossorigin>

This comment has been minimized.

@CrocoDillon

CrocoDillon Dec 1, 2017

Out of curiosity, what does the crossorigin attribute do (since it's a same origin request)?

@CrocoDillon

CrocoDillon Dec 1, 2017

Out of curiosity, what does the crossorigin attribute do (since it's a same origin request)?

This comment has been minimized.

@zachleat

zachleat Dec 1, 2017

Contributor

One point worth going over: You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode CORS. Yes, even if your fonts are on the same origin as the page. Sorry.

via https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

@zachleat

zachleat Dec 1, 2017

Contributor

One point worth going over: You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode CORS. Yes, even if your fonts are on the same origin as the page. Sorry.

via https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

This comment has been minimized.

@CrocoDillon

CrocoDillon Dec 1, 2017

Interesting, thanks for the clarification 😄

@CrocoDillon

CrocoDillon Dec 1, 2017

Interesting, thanks for the clarification 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment