closes #579 Change default fonts in preferences

package.json

@@ -38,8 +38,9 @@
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
     "test": "npm run unit && npm run e2e",
     "unit": "karma start test/unit/karma.conf.js",
-    "postinstall": "npm run lint:fix",
-    "mocha": "BABEL_ENV=test mocha --require babel-register --recursive ./test/mocha/**/*.js"
+    "postinstall": "npm run lint:fix && npm run electron-rebuild",
+    "mocha": "BABEL_ENV=test mocha --require babel-register --recursive ./test/mocha/**/*.js",
+    "electron-rebuild": "./node_modules/.bin/electron-rebuild"
   },
   "build": {
     "productName": "Whalebird",
@@ -104,6 +105,7 @@
     "electron-window-state": "^4.1.1",
     "element-ui": "^2.4.7",
     "emojilib": "^2.3.0",
+    "font-manager": "^0.3.0",
     "hawk": "^7.0.7",
     "hoek": "^5.0.3",
     "i18next": "^11.5.0",
@@ -153,6 +155,7 @@
     "electron-debug": "^1.4.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-packager": "^12.0.2",
+    "electron-rebuild": "^1.8.2",
     "eslint": "^5.2.0",
     "eslint-config-standard": "^12.0.0-alpha.0",
     "eslint-friendly-formatter": "^4.0.1",

src/config/locales/en/translation.json

@@ -116,6 +116,7 @@
         "wrapper_mask_color": "Modal wrapper"
       },
       "font_size": "Font size",
+      "font_family": "Font family",
       "display_style": {
         "title": "Display style of username",
         "display_name_and_username": "Display name and username",

src/main/fonts.js

@@ -0,0 +1,14 @@
+import fontManager from 'font-manager'
+
+const fonts = () => {
+  return new Promise((resolve, reject) => {
+    fontManager.getAvailableFonts((fonts) => {
+      const families = fonts.map(f => {
+        return f.family
+      })
+      resolve(Array.from(new Set(families)).sort())
+    })
+  })
+}
+
+export default fonts

src/main/index.js

@@ -15,6 +15,7 @@ import Authentication from './auth'
 import Account from './account'
 import Streaming from './streaming'
 import Preferences from './preferences'
+import Fonts from './fonts'
 import Hashtags from './hashtags'
 import i18n from '../config/i18n'
 import Language from '../constants/language'
@@ -690,6 +691,17 @@ ipcMain.on('remove-hashtag', (event, tag) => {
     })
 })
 
+// Fonts
+ipcMain.on('list-fonts', (event, _) => {
+  Fonts()
+    .then(list => {
+      event.sender.send('response-list-fonts', list)
+    })
+    .catch(err => {
+      event.sender.send('error-list-fonts', err)
+    })
+})
+
 // Application control
 ipcMain.on('relaunch', (event, _) => {
   app.relaunch()

src/renderer/App.vue

@@ -23,7 +23,8 @@ export default {
           '--theme-border-color': state.App.theme.border_color,
           '--theme-header-menu-color': state.App.theme.header_menu_color,
           '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
-          '--base-font-size': `${state.App.fontSize}px`
+          '--base-font-size': `${state.App.fontSize}px`,
+          '--specified-fonts': state.App.defaultFonts.join(', ')
         }
       }
     })
@@ -42,20 +43,6 @@ export default {
 </script>
 
 <style lang="scss">
-body {
-  font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
-}
-
-/*
-  These selectors are defined in user agent stylesheet. So I override.
-*/
-input,
-textarea,
-select,
-button {
-  font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
-}
-
 html, body, #app {
   --theme-background-color: #ffffff;
   --theme-selected-background-color: #f2f6fc;
@@ -86,6 +73,20 @@ html, body, #app {
   .theme-popover {
     background-color: #d9e1e8;
   }
+
+  --specified-fonts: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
+  font-family: var(--specified-fonts);
+
+
+  /*
+  These selectors are defined in user agent stylesheet. So I override.
+ */
+  input,
+  textarea,
+  select,
+  button {
+    font-family: var(--specified-fonts);
+  }
 }
 
 html, body, #app, #global_header {