fix: store font files locally

address LN-Zap#2984
bolatovumar · Oct 18, 2019 · 4fee821 · 4fee821
1 parent 00077c9
commit 4fee821
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 25 deletions.
diff --git a/fonts/roboto-light.woff2 b/fonts/roboto-light.woff2
diff --git a/fonts/roboto-regular.woff2 b/fonts/roboto-regular.woff2
diff --git a/package.json b/package.json
@@ -252,6 +252,7 @@
     "eslint-import-resolver-webpack": "0.11.1",
     "extract-react-intl-messages": "2.3.3",
     "fake-indexeddb": "2.1.1",
+    "file-loader": "4.2.0",
     "gh-pages": "2.1.1",
     "html-webpack-plugin": "3.2.0",
     "husky": "3.0.9",

diff --git a/renderer/components/UI/GlobalStyle.js b/renderer/components/UI/GlobalStyle.js
@@ -2,24 +2,26 @@ import { createGlobalStyle } from 'styled-components'
 import { themeGet } from '@styled-system/theme-get'
 import reset from 'styled-reset'
 import { rgba } from 'polished'
+import RobotoLight from '@zap/fonts/roboto-light.woff2'
+import RobotoRegular from '@zap/fonts/roboto-regular.woff2'
 
 /* eslint-disable max-len */
 const GlobalStyle = createGlobalStyle`
   /* stylelint-disable font-family-no-missing-generic-family-keyword  */
   ${reset}
 
   @font-face {
-    font-family: 'Roboto';
+    font-family: 'Robotokek';
     font-style: normal;
     font-weight: 300;
-    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
+    src: local('Roboto Light'), local('Roboto-Light'), url('${RobotoLight}') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
   @font-face {
-    font-family: 'Roboto';
+    font-family: 'Robotokek';
     font-style: normal;
     font-weight: 400;
-    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
+    src: local('Roboto'), local('Roboto-Regular'), url('${RobotoRegular}') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
 
@@ -38,7 +40,7 @@ const GlobalStyle = createGlobalStyle`
     overflow: hidden;
     -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-    font-family: 'Roboto', Arial, Helvetica, sans-serif;
+    font-family: 'Robotokek', Arial, Helvetica, sans-serif;
     font-weight: 300;
     font-size: 13px;
   }
@@ -256,8 +258,6 @@ const GlobalStyle = createGlobalStyle`
       transform: rotate(360deg);
     }
   }
-
-
 `
 
 export default GlobalStyle
diff --git a/webpack/dev/renderer.config.js b/webpack/dev/renderer.config.js
@@ -60,13 +60,7 @@ const config = merge.smart(baseConfig, {
       ],
       'img-src': ['http://resources.zaphq.io', 'data:'],
       'script-src': ["'self'", 'http://localhost:*', "'unsafe-eval'"],
-      'font-src': [
-        "'self'",
-        'data:',
-        'http://localhost:*',
-        'https://s3.amazonaws.com',
-        'https://fonts.gstatic.com',
-      ],
+      'font-src': ["'self'", 'data:', 'http://localhost:*', 'https://s3.amazonaws.com'],
       'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"],
     }),
     new webpack.DllReferencePlugin({

diff --git a/webpack/prod/renderer.config.js b/webpack/prod/renderer.config.js
@@ -45,7 +45,7 @@ const config = merge.smart(baseConfig, {
       ],
       'img-src': ['http://resources.zaphq.io', 'data:'],
       'script-src': ["'self'", "'unsafe-eval'"],
-      'font-src': ["'self'", 'data:', 'https://s3.amazonaws.com', 'https://fonts.gstatic.com'],
+      'font-src': ["'self'", 'data:', 'https://s3.amazonaws.com'],
       'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"],
     }),
     new CopyWebpackPlugin([

diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
@@ -47,22 +47,14 @@ export default {
       {
         test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
         use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
+          loader: 'file-loader',
         },
       },
       // WOFF2 Font
       {
         test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
         use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
+          loader: 'file-loader',
         },
       },
       // TTF Font

diff --git a/yarn.lock b/yarn.lock
@@ -8405,6 +8405,14 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-loader@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.2.0.tgz#5fb124d2369d7075d70a9a5abecd12e60a95215e"
+  integrity sha512-+xZnaK5R8kBJrHK0/6HRlrKNamvVS5rjyuju+rnyxRGuwUJwpAMsVzUl5dz6rK8brkzjV6JpcFNjp6NqV0g1OQ==
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.0.0"
+
 file-loader@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"