Use system fonts everywhere except for code & self host Inconsolata (jakearchibald#339)

XhmikosR · jakearchibald · web-flow · commit 3107a199ef8e · 2021-10-15T15:08:57.000+01:00
Co-authored-by: Jake Archibald &lt;jaffathecake@gmail.com&gt;
diff --git a/gulpfile.js b/gulpfile.js
@@ -97,7 +97,7 @@ const allJs = gulp.parallel(
 
 function copy() {
   return gulp.src([
-    'src/{.well-known,imgs,test-svgs}/**',
+    'src/{.well-known,imgs,test-svgs,fonts}/**',
     // Exclude the test-svgs files except for `car-lite.svg`
     // which is used in the demo
     '!src/test-svgs/!(car-lite.svg)',
@@ -118,7 +118,7 @@ const mainBuild = gulp.parallel(
 function watch() {
   gulp.watch(['src/css/**/*.scss'], gulp.series(css, html));
   gulp.watch(['src/js/**/*.js'], allJs);
-  gulp.watch(['src/*.{html,json}', 'src/**/*.svg'], gulp.parallel(html, copy, allJs));
+  gulp.watch(['src/*.{html,json}', 'src/**/*.{svg,woff2}'], gulp.parallel(html, copy, allJs));
 }
 
 function serve() {
diff --git a/src/css/_fonts.scss b/src/css/_fonts.scss
@@ -0,0 +1,26 @@
+@font-face {
+  font-family: Inconsolata;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url('fonts/code-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: Inconsolata;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url('fonts/code-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: Inconsolata;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url('fonts/code-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/src/css/_global.scss b/src/css/_global.scss
@@ -7,8 +7,9 @@ body {
 }
 
 html {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  line-height: 1.25;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
+  font-size: 1rem;
+  line-height: 1.3;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path d="M1 2V0h1v1H0v1z" fill-opacity=".05"/></svg>
@@ -21,8 +22,7 @@ code,
 kbd,
 samp,
 tt {
-  // stylelint-disable-next-line font-family-no-duplicate-names
-  font-family: monospace, monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   font-size: 1em;
 }
 
diff --git a/src/css/components/_code-output.scss b/src/css/components/_code-output.scss
@@ -20,7 +20,7 @@
   }
 
   code {
-    font-family: Inconsolata, monospace;
+    font-family: Inconsolata, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     line-height: 1.5;
     font-size: 0.9rem;
     display: block;
diff --git a/src/css/components/_main-menu.scss b/src/css/components/_main-menu.scss
@@ -5,7 +5,6 @@
   bottom: 0;
   right: 0;
   z-index: 3;
-  font-family: sans-serif;
 
   &.hidden {
     pointer-events: none;
@@ -170,7 +169,7 @@
   }
 
   h1 {
-    font-size: inherit;
+    font-size: 1rem;
     margin: 0;
   }
 
@@ -194,5 +193,5 @@
 .title-text {
   display: grid;
   grid-template-rows: max-content max-content;
-  gap: 0.1em;
+  gap: 0.2em;
 }
diff --git a/src/css/components/_material-slider.scss b/src/css/components/_material-slider.scss
@@ -47,7 +47,7 @@
     text-align: center;
     width: 100%;
     line-height: 1;
-    font-size: 0.8rem;
+    font-size: 0.85rem;
     opacity: 0;
     transition: opacity 0.1s ease-out;
     transform: translateZ(0);
diff --git a/src/css/components/_preloader.scss b/src/css/components/_preloader.scss
@@ -8,7 +8,6 @@
   z-index: 3;
   color: #fff;
   opacity: 0;
-  font-family: sans-serif;
   display: flex;
   flex-flow: column;
   align-items: center;
diff --git a/src/css/head.scss b/src/css/head.scss
@@ -1,3 +1,4 @@
+@import 'fonts';
 @import 'utils';
 @import 'global';
 @import 'components/main-menu';
diff --git a/src/fonts/code-latin-ext.woff2 b/src/fonts/code-latin-ext.woff2
diff --git a/src/fonts/code-latin.woff2 b/src/fonts/code-latin.woff2
diff --git a/src/fonts/code-vietnamese.woff2 b/src/fonts/code-vietnamese.woff2
diff --git a/src/index.html b/src/index.html
@@ -28,8 +28,7 @@
     </script>
     <script src="js/page.js" defer></script>
     <link rel="preload" as="style" href="all.css" onload="rel='stylesheet'">
-    <link rel="preload" crossorigin as="style" href="https://fonts.googleapis.com/css?family=Inconsolata" onload="rel='stylesheet'">
-    <link rel="preconnect" crossorigin href="https://fonts.gstatic.com">
+    <link rel="preload" crossorigin as="font" href="fonts/code-latin.woff2">
     <link rel="manifest" href="manifest.json">
     <link rel="apple-touch-icon" href="imgs/icon.png">
     <link rel="icon" href="imgs/icon.png">
diff --git a/src/js/sw/index.js b/src/js/sw/index.js
@@ -22,7 +22,7 @@ addEventListener('install', event => {
       'js/prism-worker.js',
       'js/svgo-worker.js',
       'changelog.json',
-      'https://fonts.googleapis.com/css?family=Inconsolata',
+      'fonts/code-latin.woff2',
     ]);
 
     const activeVersion = await activeVersionPromise;
@@ -62,7 +62,7 @@ async function handleFontRequest(request) {
 addEventListener('fetch', event => {
   const url = new URL(event.request.url);
 
-  if (url.host == 'fonts.gstatic.com') {
+  if (url.pathname.endsWith('.woff2')) {
     event.respondWith(handleFontRequest(event.request));
     return;
   }

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`code {`
`23`		`- font-family: Inconsolata, monospace;`
	`23`	`+ font-family: Inconsolata, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
`24`	`24`	`line-height: 1.5;`
`25`	`25`	`font-size: 0.9rem;`
`26`	`26`	`display: block;`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@`
`5`	`5`	`bottom: 0;`
`6`	`6`	`right: 0;`
`7`	`7`	`z-index: 3;`
`8`		`- font-family: sans-serif;`
`9`	`8`
`10`	`9`	`&.hidden {`
`11`	`10`	`pointer-events: none;`
`@@ -170,7 +169,7 @@`
`170`	`169`	`}`
`171`	`170`
`172`	`171`	`h1 {`
`173`		`- font-size: inherit;`
	`172`	`+ font-size: 1rem;`
`174`	`173`	`margin: 0;`
`175`	`174`	`}`
`176`	`175`
`@@ -194,5 +193,5 @@`
`194`	`193`	`.title-text {`
`195`	`194`	`display: grid;`
`196`	`195`	`grid-template-rows: max-content max-content;`
`197`		`- gap: 0.1em;`
	`196`	`+ gap: 0.2em;`
`198`	`197`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@import 'fonts';`
`1`	`2`	`@import 'utils';`
`2`	`3`	`@import 'global';`
`3`	`4`	`@import 'components/main-menu';`