Make builds of the editor and the website serve their own local fonts (#2186)

* WIP

* Done?

* Install fonts in CI

* Use absolute path so minified inlined CSS works

* Fix Bezier-rs demo fonts?

* Use opsz

* Revert removal of text balancer

* Pull in the text balancer from our static host

website/sass/base.scss

@@ -39,7 +39,7 @@ html,
 body {
 	color: var(--color-navy);
 	background: white;
-	font-family: "Inter", sans-serif;
+	font-family: "Inter Variable", sans-serif;
 	line-height: 1.5;
 	font-weight: 500;
 	font-size: 18px;
@@ -157,12 +157,12 @@ body > .page {
 							background-image: url('data:image/svg+xml;utf8,\
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,15C5.12471,9.753694 0.5,8.795225 0.5,4.736524 C0.5,-0.507473 7.468734,0 8,4.967381 C8.531266,0 15.5,-0.507473 15.5,4.736524 C15.5,8.795225 10.87529,9.753694 8,15z" fill="%23cc304f" /></svg>\
 								');
-								display: inline-block;
-								width: 0.75em;
-								height: 0.75em;
-								margin-left: 0.25em;
-								margin-bottom: -0.1em;
-								vertical-align: baseline;
+							display: inline-block;
+							width: 0.75em;
+							height: 0.75em;
+							margin-left: 0.25em;
+							margin-bottom: -0.1em;
+							vertical-align: baseline;
 						}
 					}
 
@@ -323,7 +323,6 @@ body > .page {
 						margin-top: 20px;
 					}
 				}
-
 			}
 
 			details[open] summary::before {
@@ -436,7 +435,7 @@ h3,
 h4,
 h5,
 h6 {
-	font-family: "Inter", sans-serif;
+	font-family: "Inter Variable", sans-serif;
 	line-height: 1.5;
 	font-weight: 800;
 	display: inline-block;
@@ -663,7 +662,7 @@ hr,
 
 .arrow::after {
 	content: " »";
-	font-family: "Inter", sans-serif;
+	font-family: "Inter Variable", sans-serif;
 }
 
 .video-background {

website/sass/component/code-snippet.scss

@@ -38,7 +38,7 @@ pre {
 			content: attr(data-lang);
 			color: rgba(var(--color-seaside-rgb), 0.5);
 			text-transform: lowercase;
-			font-family: "Inter", sans-serif;
+			font-family: "Inter Variable", sans-serif;
 			font-size: 0.75em;
 			font-weight: 700;
 			font-style: italic;

website/sass/component/feature-box.scss

@@ -46,7 +46,7 @@
 h1.feature-box-header.feature-box-header {
 	&,
 	& a {
-		font-family: "Inter", sans-serif;
+		font-family: "Inter Variable", sans-serif;
 		line-height: 1.5;
 		font-weight: 800;
 		text-transform: uppercase;

website/sass/layout/balance-text.scss

@@ -1,22 +0,0 @@
-// CSS component of the JS text balancer script.
-// This must be loaded as an inline stylesheet in the head of the
-// document to avoid the possibility of a visible layout shift.
-
-.balance-text {
-	visibility: hidden;
-}
-
-@media (scripting: none) {
-	.balance-text {
-		visibility: visible !important;
-	}
-}
-
-@supports (text-wrap: balance) {
-	.balance-text,
-	.balanced-text {
-		text-align: left;
-		text-wrap: balance;
-		visibility: visible;
-	}
-}

website/sass/page/about.scss

@@ -5,8 +5,12 @@
 	animation: fadeInAfterWait 2s ease-in 2s forwards;
 
 	@keyframes fadeInAfterWait {
-		0% { opacity: 0; }
-		100% { opacity: 1; }
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
 	}
 }
 
@@ -34,11 +38,9 @@
 			}
 
 			.flag {
-				font-family: "Noto Color Emoji", sans-serif;
-				font-style: normal;
+				width: 1em;
+				height: 1em;
 				vertical-align: middle;
-				font-size: 0.8em;
-				cursor: default;
 			}
 		}
 	}