From 8079b02216ad46346b0460e573e2a5e6689dc583 Mon Sep 17 00:00:00 2001
From: Rasmus Andersson <rasmus@notion.se>
Date: Mon, 17 Aug 2020 09:46:29 -0700
Subject: website: fixes /lab/var.html in Firefox where a local font-face
 declaration fails to override a global one. Closes #287

---
 docs/lab/var.html | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

(limited to 'docs')

diff --git a/docs/lab/var.html b/docs/lab/var.html
index b8a42870c..483e0ec47 100644
--- a/docs/lab/var.html
+++ b/docs/lab/var.html
@@ -12,11 +12,11 @@
 }
 
 @font-face {
-  font-family: 'Inter var';
+  font-family: 'Inter-var-x';
   font-weight: 100 900;
   font-style: oblique 0deg 10deg;
-  src: url('fonts/var/Inter.var.woff2') format("woff2-variations"),
-       url('../font-files/Inter.var.woff2') format("woff2-variations");
+  src: url('fonts/var/Inter.var.woff2') format("woff2"),
+       url('../font-files/Inter.var.woff2') format("woff2");
 }
 
 html {
@@ -24,6 +24,13 @@ html {
   font-size: 14px;
   letter-spacing: 0;
 }
+
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: 'Inter-var-x', sans-serif;
+  }
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -33,13 +40,9 @@ body {
   padding: 40px 40px 40px 35px;
   font-size: var(--size);
   letter-spacing: -0.03em;
+  font-family: 'Inter-var-x', "Adobe NotDef";
   font-variation-settings: 'wght' var(--weight), 'slnt' calc(-1 * var(--slant));
-}
-
-@supports (font-variation-settings: normal) {
-  html {
-    font-family: 'Inter var', sans-serif;
-  }
+  outline: none;
 }
 
 label {
@@ -83,7 +86,7 @@ label {
     <option value="right">Align: right</option>
   </select>
 </div>
-<div class="sample" contenteditable>
+<div class="sample" contenteditable autocomplete="off" spellcheck="false">
 Inter Typeface Family<br>
 Variable weight axis<br>
 Variable slant/oblique axis<br>
-- 
cgit v1.2.3