Introduce muli and poppins fonts.

Font files fetched from Google Fonts via custom script.
CSP directive enhanced to contain 'fonts' declaration for loading
via 'self' or data: URIs (and dev server)
Common variables introduced for using new fonts

app/browser/api/textCalc.js

@@ -18,7 +18,7 @@ const {makeImmutable} = require('../../common/state/immutableUtil')
 const globalStyles = require('../../renderer/components/styles/global')
 
 const fontSize = globalStyles.spacing.bookmarksItemFontSize
-const fontFamily = globalStyles.defaultFontFamily
+const fontFamily = globalStyles.typography.default.family
 
 const calcText = (item, type) => {
   const title = type === siteTags.BOOKMARK
@@ -34,7 +34,7 @@ const calcText = (item, type) => {
       let ctx = document.createElement('canvas').getContext('2d')
       ctx.font = '${fontSize} ${fontFamily}'
       const width = ctx.measureText('${title}').width
-      
+
       return width
     })()
   `
@@ -84,7 +84,7 @@ const calcTextList = (list) => {
       const bookmarks = []
       const folders = []
       const list = JSON.parse('${paramList}')
-  
+
       list.forEach(item => {
         if (item.type === '${siteTags.BOOKMARK}') {
           bookmarks.push({
@@ -100,12 +100,12 @@ const calcTextList = (list) => {
           })
         }
       })
-  
+
       const result = {
         bookmarks: bookmarks,
         folders: folders
       }
-  
+
       return JSON.stringify(result)
     })()
   `

app/extensions.js

@@ -186,6 +186,7 @@ let generateBraveManifest = () => {
     'default-src': '\'self\'',
     'form-action': '\'none\'',
     'style-src': '\'self\' \'unsafe-inline\'',
+    'font-src': '\'self\' data:',
     'img-src': '* data: file://*',
     'frame-src': '\'self\' https://brave.com'
   }
@@ -198,6 +199,7 @@ let generateBraveManifest = () => {
       'http://' + devServer,
       'ws://' + devServer].join(' ')
     cspDirectives['style-src'] = '\'self\' \'unsafe-inline\' http://' + devServer
+    cspDirectives['font-src'] += ` http://${devServer}`
   }
 
   baseManifest.content_security_policy = concatCSP(cspDirectives)

app/renderer/components/styles/global.js

@@ -14,10 +14,11 @@ const {opacityIncreaseKeyframes, tabFadeInKeyframes} = require('./animations')
 * migrate customizable options to theme.js
 */
 
+const defaultFontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI"` +
+`, "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans"` +
+`, "Droid Sans", sans-serif`
+
 const globalStyles = {
-  defaultFontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI"` +
-    `, "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans"` +
-    `, "Droid Sans", sans-serif`,
 
   breakpoint: {
     breakpointWideViewport: '1000px',
@@ -100,6 +101,26 @@ const globalStyles = {
     urlBarOutline: '#bbb',
     alphaWhite: 'rgba(255,255,255,0.8)'
   },
+  typography: {
+    // font for titles, labels in *most* cases (it's not a hard rule, consult a designer)
+    display: {
+      family: 'Poppins, ' + defaultFontFamily,
+      // spacing for fonts >= 30px (generally)
+      spacingLarge: '-0.4px',
+      // spacing for font >= 20px and < 30px
+      spacingMedium: '-0.2px',
+      // spacing for font < 20px
+      spacingRegular: 0
+    },
+    // font choices for flowing body text
+    body: {
+      family: `Muli, ` + defaultFontFamily
+    },
+    // system text
+    default: {
+      family: defaultFontFamily
+    }
+  },
   radius: {
     borderRadius: '4px',
     borderRadiusTabs: '4px',

fonts/index.js

@@ -0,0 +1,2 @@
+require('./muli.css')
+require('./poppins.css')