CSS: implement Variable Fonts where supported

i-tu · Nov 11, 2020 · bfab085 · bfab085
1 parent 2fca874
commit bfab085
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 2 deletions.
diff --git a/docs/WOFF2/SourceCodeVariable-Italic.otf.woff2 b/docs/WOFF2/SourceCodeVariable-Italic.otf.woff2
diff --git a/docs/WOFF2/SourceCodeVariable-Italic.ttf.woff2 b/docs/WOFF2/SourceCodeVariable-Italic.ttf.woff2
diff --git a/docs/WOFF2/SourceCodeVariable-Roman.otf.woff2 b/docs/WOFF2/SourceCodeVariable-Roman.otf.woff2
diff --git a/docs/WOFF2/SourceCodeVariable-Roman.ttf.woff2 b/docs/WOFF2/SourceCodeVariable-Roman.ttf.woff2
diff --git a/docs/index.html b/docs/index.html
@@ -9,7 +9,7 @@
     <style>
 
         body {
-            font-family: 'Source Code Pro', monospace;
+            font-family: 'Source Code Pro VF', 'Source Code Pro', monospace;
             overflow-x: hidden;
             font-size: 100%;
         }
@@ -89,7 +89,7 @@
             content: attr(data-ribbon);
 
             color: #fff;
-            font: 700 13px 'Source Code Pro';
+            font: 700 13px 'Source Code Pro VF', 'Source Code Pro';
             line-height: 1.54em;
             text-decoration: none;
             text-align: center;

diff --git a/docs/source-code-pro.css b/docs/source-code-pro.css
@@ -123,3 +123,23 @@
     src: url('WOFF2/TTF/SourceCodePro-BlackIt.ttf.woff2') format('woff2'),
          url('WOFF/OTF/SourceCodePro-BlackIt.otf.woff') format('woff');
 }
+
+@supports (font-variation-settings:normal) {
+    @font-face{
+        font-family: 'Source Code Pro VF';
+        font-weight: 200 900;
+        font-style: normal;
+        font-stretch: normal;
+        src: url('WOFF2/SourceCodeVariable-Roman.otf.woff2') format('woff2-variations'),
+             url('WOFF2/SourceCodeVariable-Roman.ttf.woff2') format('woff2-variations');
+    }
+    @font-face{
+        font-family: 'Source Code Pro VF';
+        font-weight: 200 900;
+        font-style: italic;
+        font-stretch: normal;
+        src: url('WOFF2/SourceCodeVariable-Italic.otf.woff2') format('woff2-variations'),
+             url('WOFF2/SourceCodeVariable-Italic.ttf.woff2') format('woff2-variations');
+    }
+
+}