diff --git a/demo-shell-ng2/app/css/muli-font.css b/demo-shell-ng2/app/css/muli-font.css
new file mode 100644
index 0000000000..07b9f06adb
--- /dev/null
+++ b/demo-shell-ng2/app/css/muli-font.css
@@ -0,0 +1,106 @@
+@font-face {
+    font-family: Muli;
+    src: url(../fonts/Muli-Italic.ttf);
+}
+
+html, body {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+h1, h2 {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+h3, h4 {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+
+h5, h6 {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+    margin: 24px 0 16px
+}
+
+blockquote {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+
+.mdl-typography--display-4, .mdl-typography--display-4-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+
+.mdl-typography--display-3, .mdl-typography--display-3-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--display-2, .mdl-typography--display-2-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--display-1, .mdl-typography--display-1-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+
+}
+
+.mdl-typography--headline, .mdl-typography--headline-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--title, .mdl-typography--title-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--subhead, .mdl-typography--subhead-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--body-2-force-preferred-font, .mdl-typography--body-2-force-preferred-font-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--body-1-force-preferred-font, .mdl-typography--body-1-force-preferred-font-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+
+.mdl-typography--caption-force-preferred-font {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif
+}
+
+.mdl-typography--caption-force-preferred-font-color-contrast, .mdl-typography--menu {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif
+}
+
+.mdl-typography--menu-color-contrast, .mdl-typography--button, .mdl-typography--button-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-badge[data-badge]:after {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-button {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-list__item {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-layout__title, .mdl-layout-title {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-snackbar {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-snackbar__action {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
diff --git a/demo-shell-ng2/app/fonts/Muli-Italic.ttf b/demo-shell-ng2/app/fonts/Muli-Italic.ttf
new file mode 100755
index 0000000000..9d205732ee
Binary files /dev/null and b/demo-shell-ng2/app/fonts/Muli-Italic.ttf differ
diff --git a/demo-shell-ng2/app/fonts/Muli-Light.ttf b/demo-shell-ng2/app/fonts/Muli-Light.ttf
new file mode 100755
index 0000000000..8dfff09dff
Binary files /dev/null and b/demo-shell-ng2/app/fonts/Muli-Light.ttf differ
diff --git a/demo-shell-ng2/app/fonts/Muli-LightItalic.ttf b/demo-shell-ng2/app/fonts/Muli-LightItalic.ttf
new file mode 100755
index 0000000000..a75b8fd274
Binary files /dev/null and b/demo-shell-ng2/app/fonts/Muli-LightItalic.ttf differ
diff --git a/demo-shell-ng2/app/fonts/Muli-Regular.ttf b/demo-shell-ng2/app/fonts/Muli-Regular.ttf
new file mode 100755
index 0000000000..cf324e4b04
Binary files /dev/null and b/demo-shell-ng2/app/fonts/Muli-Regular.ttf differ
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index c707f4ddd3..0c937df6a7 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -4,7 +4,10 @@
     <base href="/">
     <title>Demo Application - Angular 2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <link href="app/css/app.css" rel="stylesheet">
+    <link href="app/css/muli-font.css" rel="stylesheet">
+
     <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
     <!-- Google Material Design Lite -->
     <link rel="stylesheet" href="./assets/material.orange-blue.min.css">