4 files changed, 12 insertions, 8 deletions
diff --git a/demo/src/less/components/players.less b/demo/src/less/components/players.less
index f932ae5b..c7cc0839 100644
--- a/demo/src/less/components/players.less
+++ b/demo/src/less/components/players.less
@@ -10,7 +10,7 @@ video {
 
 // Example players
 .plyr {
-    margin: 0 auto;
+    margin: @spacing-base auto;
     border-radius: @border-radius-base;
     box-shadow: 0 2px 5px fade(#000, 20%);
 }
diff --git a/demo/src/less/layout/core.less b/demo/src/less/layout/core.less
index a17a54a7..08352e3d 100644
--- a/demo/src/less/layout/core.less
+++ b/demo/src/less/layout/core.less
@@ -27,15 +27,18 @@ body {
     flex-direction: column;
 }
 
-main {
-    text-align: center;
-}
-
 .grid {
     flex: 1;
+    overflow: auto;
+}
+
+main {
+    margin: auto;
+    text-align: center;
 }
 
 aside {
+    position: relative;
     display: flex;
     flex-shrink: 0;
     align-items: center;
diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less
index c6720210..2ae6e8f4 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
@@ -4,7 +4,7 @@
 
 @font-face {
     font-family: 'Avenir';
-    src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
+    src: local('Avenir-Medium'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
     font-style: normal;
     font-weight: @font-weight-base;
@@ -13,7 +13,7 @@
 
 @font-face {
     font-family: 'Avenir';
-    src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
+    src: local('Avenir-Heavy'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
     font-style: normal;
     font-weight: @font-weight-bold;
@@ -22,7 +22,7 @@
 
 @font-face {
     font-family: 'Avenir';
-    src: url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
+    src: local('Avenir-Black'), url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3') format('woff');
     font-style: normal;
     font-weight: @font-weight-heavy;
diff --git a/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less
index fbf36546..821d2b3e 100644
--- a/demo/src/less/lib/mixins.less
+++ b/demo/src/less/lib/mixins.less
@@ -33,6 +33,7 @@
 // ---------------------------------------
 .font-size(@font-size: 16) {
     @rem: round((@font-size / 16), 3);
+
     font-size: (@font-size * 1px);
     font-size: ~'@{rem}rem';
 }