diff --git a/docs/WOFF2/SourceCodeVariable-Italic.otf.woff2 b/docs/WOFF2/SourceCodeVariable-Italic.otf.woff2
new file mode 100644
index 0000000000..d19fb407c2
Binary files /dev/null and b/docs/WOFF2/SourceCodeVariable-Italic.otf.woff2 differ
diff --git a/docs/WOFF2/SourceCodeVariable-Italic.ttf.woff2 b/docs/WOFF2/SourceCodeVariable-Italic.ttf.woff2
new file mode 100644
index 0000000000..bbf25e8a50
Binary files /dev/null and b/docs/WOFF2/SourceCodeVariable-Italic.ttf.woff2 differ
diff --git a/docs/WOFF2/SourceCodeVariable-Roman.otf.woff2 b/docs/WOFF2/SourceCodeVariable-Roman.otf.woff2
new file mode 100644
index 0000000000..a0827e8e2c
Binary files /dev/null and b/docs/WOFF2/SourceCodeVariable-Roman.otf.woff2 differ
diff --git a/docs/WOFF2/SourceCodeVariable-Roman.ttf.woff2 b/docs/WOFF2/SourceCodeVariable-Roman.ttf.woff2
new file mode 100644
index 0000000000..5c1cd9f864
Binary files /dev/null and b/docs/WOFF2/SourceCodeVariable-Roman.ttf.woff2 differ
diff --git a/docs/index.html b/docs/index.html
index 1256ab94ac..9fb1aed48a 100755
--- 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
index 40b0c5a6b3..77519abfb9 100755
--- 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');
+    }
+
+}