website

2 files changed, 24 insertions, 8 deletions

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)