diff --git a/docs/inter-ui.css b/docs/inter-ui.css
index 542b6fd5d..982a6a71f 100644
--- a/docs/inter-ui.css
+++ b/docs/inter-ui.css
@@ -2,68 +2,68 @@
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 400;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-Regular.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-Regular.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-Regular.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-Regular.woff?v=3.0") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 400;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-Italic.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-Italic.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-Italic.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-Italic.woff?v=3.0") format("woff");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 500;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-Medium.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-Medium.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-Medium.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-Medium.woff?v=3.0") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 500;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-MediumItalic.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-MediumItalic.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-MediumItalic.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-MediumItalic.woff?v=3.0") format("woff");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 700;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-Bold.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-Bold.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-Bold.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-Bold.woff?v=3.0") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 700;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-BoldItalic.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-BoldItalic.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-BoldItalic.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-BoldItalic.woff?v=3.0") format("woff");
 }
 
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 900;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-Black.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-Black.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-Black.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-Black.woff?v=3.0") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 900;
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url("font-files/Inter-UI-BlackItalic.woff2?v=2.5") format("woff2"),
-       url("font-files/Inter-UI-BlackItalic.woff?v=2.5") format("woff");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI-BlackItalic.woff2?v=3.0") format("woff2"),
+       url("font-files/Inter-UI-BlackItalic.woff?v=3.0") format("woff");
 }
 
 /*
@@ -84,6 +84,6 @@ html {
 @font-face {
   font-family: 'Inter UI var';
   font-weight: 400 900; /* safe weight range */
-  src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
-       url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2");
+  src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
+       url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2");
 }
diff --git a/docs/lab/favicon.png b/docs/lab/favicon.png
new file mode 100755
index 000000000..8a731f3cc
Binary files /dev/null and b/docs/lab/favicon.png differ
diff --git a/docs/lab/index.html b/docs/lab/index.html
index a7468f8fc..0c9ccb0a9 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <link rel="icon" type="image/png" href="../favicon.png" />
+    <title>lab</title>
+    <link rel="icon" type="image/png" href="favicon.png" />
     <link href="../inter-ui.css" rel="stylesheet">
     <script type="text/javascript">
 
@@ -743,8 +744,6 @@ for (const ch of uniqueChars) {
 
 // end of samples
     </script>
-    <meta charset="utf-8">
-    <title>👀</title>
     <style id="font-css" type="text/css-template">
 /* Roboto for comparison */
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@@ -1295,6 +1294,15 @@ function main() {
   const repertoireControl = document.querySelector('.repertoireControl')
   const samplesElement = document.querySelector('samples')
 
+  // filter paste to match style
+  ;[].slice.call(document.querySelectorAll('[contenteditable]')).forEach(el => {
+    el.addEventListener('paste', ev => {
+      ev.preventDefault()
+      let text = ev.clipboardData.getData("text/plain")
+      document.execCommand("insertHTML", false, text)
+    }, {capture:true,passive:false})
+  })
+
   let sizeVar = null
 
   function forEachGlyphlist(fn) {
@@ -1513,10 +1521,6 @@ function main() {
     return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
   })
 
-  vars.bind('varItalic', (e, v) => {
-    console.log('varItalic', v)
-  })
-
 
   // compare
   let secondarySampleClassNameAddition = null
@@ -1709,6 +1713,9 @@ function main() {
   </body>
   <script type="text/javascript">
     main();
-    document.title += ' ' + (new Date()).toTimeString().split(':').slice(0,2).join(':');
+    document.title = (
+      (new Date()).toTimeString().split(':').slice(0,2).join(':') +
+      ' — ' + (new Date()).toDateString()
+    );
   </script>
 </html>
diff --git a/docs/samples/index.css b/docs/samples/index.css
index 4711dff69..8ce2be780 100644
--- a/docs/samples/index.css
+++ b/docs/samples/index.css
@@ -65,14 +65,16 @@ livesample.col2 {
   column-count: 2;
 }
 
-.font-style-regular       { font-weight:400 !important; font-style:normal !important; }
-.font-style-italic        { font-weight:400 !important; font-style:italic !important; }
-.font-style-medium        { font-weight:500 !important; font-style:normal !important; }
-.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; }
-.font-style-bold          { font-weight:700 !important; font-style:normal !important; }
-.font-style-bold-italic   { font-weight:700 !important; font-style:italic !important; }
-.font-style-black         { font-weight:900 !important; font-style:normal !important; }
-.font-style-black-italic  { font-weight:900 !important; font-style:italic !important; }
+.font-style-regular           { font-variation-settings: "wght" 400, "ital" 0   !important; font-weight:400 !important; font-style:normal !important; }
+.font-style-italic            { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; }
+.font-style-medium            { font-variation-settings: "wght" 500, "ital" 0   !important; font-weight:500 !important; font-style:normal !important; }
+.font-style-medium-italic     { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; }
+.font-style-bold              { font-variation-settings: "wght" 700, "ital" 0   !important; font-weight:700 !important; font-style:normal !important; }
+.font-style-bold-italic       { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; }
+.font-style-extra-bold        { font-variation-settings: "wght" 800, "ital" 0   !important; font-weight:800 !important; font-style:normal !important; }
+.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; }
+.font-style-black             { font-variation-settings: "wght" 900, "ital" 0   !important; font-weight:900 !important; font-style:normal !important; }
+.font-style-black-italic      { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; }
 
 div.live {
   margin-top:1em;
diff --git a/docs/samples/index.html b/docs/samples/index.html
index 69ed90095..7e656f0c1 100644
--- a/docs/samples/index.html
+++ b/docs/samples/index.html
@@ -38,6 +38,8 @@ endfor
           <option value="medium-italic">Medium Italic</option>
           <option value="bold" default>Bold</option>
           <option value="bold-italic">Bold Italic</option>
+          <option value="extra-bold" default>Extra Bold</option>
+          <option value="extra-bold-italic">Extra Bold Italic</option>
           <option value="black" default>Black</option>
           <option value="black-italic">Black Italic</option>
         </select>
@@ -184,6 +186,16 @@ graph.setOrigin(-0.2, 0.8)
 graph.setScale(0.049, 5)
 
 var s2 = $('livesample.s2')
+var samples = $$('livesample')
+
+// filter paste to match style
+samples.forEach(sample => {
+  sample.addEventListener('paste', ev => {
+    ev.preventDefault()
+    let text = ev.clipboardData.getData("text/plain")
+    document.execCommand("insertHTML", false, text)
+  }, {capture:true,passive:false})
+})
 
 function updateWidth() {
   var fontSize = bindings.value('font-size', 0)
@@ -235,6 +247,8 @@ bindings.configure('style', null, null, function (style) {
   cl.remove('font-style-medium-italic')
   cl.remove('font-style-bold')
   cl.remove('font-style-bold-italic')
+  cl.remove('font-style-extra-bold')
+  cl.remove('font-style-extra-bold-italic')
   cl.remove('font-style-black')
   cl.remove('font-style-black-italic')
   cl.add('font-style-' + style)