fix(fonts): add Roboto fonts in the project (#151)

demo/index.html

@@ -21,7 +21,6 @@
   <meta charset="UTF-8">
   <link rel="stylesheet" href="../dist/vendor.css">
   <link rel="stylesheet" href="../dist/style.css">
-  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:locale" content="en_US" />
   <meta name="description" content="This is the live demo for Docker Registry User Interface. Try it now! Sources : https://github.com/Joxit/docker-registry-ui" />

src/index.html

@@ -25,8 +25,8 @@
   <!-- build:css style.css -->
   <link href="style.css" rel="stylesheet" type="text/css">
   <link href="material-icons.css" rel="stylesheet" type="text/css">
+  <link href="roboto.css" rel="stylesheet" type="text/css">
   <!-- endbuild -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:site_name" content="Docker Registry UI" />
   <meta name="twitter:card" content="summary" />

src/roboto.css

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(fonts/Roboto-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Light'),
+       local('Roboto-Light'),
+       url(fonts/Roboto-Light.woff2) format('woff2'),
+       url(fonts/Roboto-Light.woff) format('woff'),
+       url(fonts/Roboto-Light.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(fonts/Roboto-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Regular'),
+       local('Roboto-Regular'),
+       url(fonts/Roboto-Regular.woff2) format('woff2'),
+       url(fonts/Roboto-Regular.woff) format('woff'),
+       url(fonts/Roboto-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(fonts/Roboto-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Bold'),
+       local('Roboto-Bold'),
+       url(fonts/Roboto-Bold.woff2) format('woff2'),
+       url(fonts/Roboto-Bold.woff) format('woff'),
+       url(fonts/Roboto-Bold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(fonts/RobotoMono-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Mono Regular'),
+       local('RobotoMono-Regular'),
+       local('Roboto-Mono-Regular'),
+       url(fonts/RobotoMono-Regular.woff2) format('woff2'),
+       url(fonts/RobotoMono-Regular.woff) format('woff'),
+       url(fonts/RobotoMono-Regular.ttf) format('truetype');
+}