diff --git a/.eslintignore b/.eslintignore
index 974108d5e..54696b26d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,4 +10,5 @@ build/
 *.yaml
 Dockerfile
 *.rpi
+*.html
 *.scss
diff --git a/package.json b/package.json
index 94c81fa04..42e485fbc 100644
--- a/package.json
+++ b/package.json
@@ -137,6 +137,7 @@
     "react-hot-loader": "4.2.0",
     "react-router": "4.3.1",
     "react-router-dom": "4.2.2",
+    "resolve-url-loader": "3.0.0",
     "rimraf": "2.6.2",
     "sass-loader": "7.1.0",
     "source-map-loader": "0.2.4",
@@ -150,6 +151,7 @@
     "stylelint-scss": "3.3.1",
     "stylelint-webpack-plugin": "0.10.5",
     "supertest": "3.3.0",
+    "typeface-roboto": "0.0.54",
     "url-loader": "1.1.1",
     "verdaccio-auth-memory": "0.0.4",
     "verdaccio-memory": "1.0.3",
diff --git a/src/webui/app.js b/src/webui/app.js
index 3d0edaed9..0dfec0ce4 100644
--- a/src/webui/app.js
+++ b/src/webui/app.js
@@ -12,7 +12,7 @@ import Header from './components/Header';
 import { Container, Content } from './components/Layout';
 import Route from './router';
 import API from './utils/api';
-
+import './styles/typeface-roboto.scss';
 import './styles/main.scss';
 import 'normalize.css';
 
diff --git a/src/webui/styles/typeface-roboto.scss b/src/webui/styles/typeface-roboto.scss
new file mode 100644
index 000000000..f79f7546e
--- /dev/null
+++ b/src/webui/styles/typeface-roboto.scss
@@ -0,0 +1 @@
+@import '~typeface-roboto';
diff --git a/src/webui/styles/variables.scss b/src/webui/styles/variables.scss
index 557518b45..db5b32e56 100644
--- a/src/webui/styles/variables.scss
+++ b/src/webui/styles/variables.scss
@@ -29,7 +29,7 @@
 // Scaffolding
 // -------------------------
 
-$body-bg:     $white; 
+$body-bg:     $white;
 $text-color:  $eclipse;
 
 // Typography
diff --git a/src/webui/template/index.html b/src/webui/template/index.html
index c56371ea0..1ec99d844 100644
--- a/src/webui/template/index.html
+++ b/src/webui/template/index.html
@@ -7,10 +7,6 @@
         <%= htmlWebpackPlugin.options.title %>
     </title>
     <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.verdaccioURL %>/-/static/favicon.ico" />
-    <!-- Robot Font -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
-    <!-- Material Icons Font -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script>
         window.VERDACCIO_API_URL = '<%= htmlWebpackPlugin.options.verdaccioURL %>/-/verdaccio/';
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
index 348a55c97..aa98bee64 100644
--- a/tools/webpack.config.js
+++ b/tools/webpack.config.js
@@ -63,32 +63,18 @@ module.exports = {
         ]
       },
       {
-        test: /\.(ttf|eot|woff|woff2)$/,
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
         loader: 'url-loader',
         options: {
-          limit: 50000,
-          name: 'fonts/[hash].[ext]',
+          name: 'fonts/[name].[ext]',
+          limit: 50,
         },
       },
       {
         test: /\.scss$/,
         exclude: /node_modules/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              module: true,
-              localIdentName: '[path][name]__[local]--[hash:base64:5]',
-            },
-          },
-          {
-            loader: 'sass-loader',
-          },
-        ],
+        loader: `style-loader!css-loader?module&sourceMap=false&localIdentName=[path][name]__[local]--[hash:base64:5]
+        !resolve-url-loader?keepQuery!sass-loader?sourceMap`
       },
       {
         test: /\.css$/,
diff --git a/yarn.lock b/yarn.lock
index 77da6dd48..c03c6c20b 100644
Binary files a/yarn.lock and b/yarn.lock differ