Make font-family as configurable parameter(#220) (#294)

We look for fonts object within siteConfig.js

Author: cowlingj

docs/api-site-config.md

@@ -62,6 +62,7 @@ headerLinks: [
 
 ### Optional Fields
 
+`fonts` - Font-family css configuration for the site. If a font family specified as `$myFont`, then adding a `myFont` key to an array in `fonts` will allow you to configure the font. Items appearing earlier in the array will take priority of later elements, so these should be more specific. 
 `customDocsPath` - By default, Docusaurus expects your documentation to be in a directory called `docs`. This directory is at the same level as the `website` directory (i.e., not inside the `website` directory). You can specify a custom path to your documentation with this field. **Note that all of your documentation *.md files must still reside in a flat hierarchy. You cannot have your documents in nested directories**.
 
 ```js

lib/server/generate.js

@@ -346,6 +346,18 @@ function execute() {
         codeColor
       );
 
+      if (siteConfig.fonts) {
+        Object.keys(siteConfig.fonts).forEach(key => {
+          const fontString = siteConfig.fonts[key]
+            .map(font => '"' + font + '"')
+            .join(', ');
+          cssContent = cssContent.replace(
+            new RegExp('\\$' + key, 'g'),
+            fontString
+          );
+        });
+      }
+
       mkdirp.sync(path.dirname(targetFile));
       fs.writeFileSync(targetFile, cssContent);
     } else if (!fs.lstatSync(file).isDirectory()) {
@@ -357,7 +369,7 @@ function execute() {
   // copy all static files from user
   files = glob.sync(join(CWD, 'static', '**'), {dot: true});
   files.forEach(file => {
-    // parse css files to replace colors according to siteConfig
+    // parse css files to replace colors and fonts according to siteConfig
     if (file.match(/\.css$/) && !isSeparateCss(file)) {
       const mainCss = join(buildDir, 'css', 'main.css');
       let cssContent = fs.readFileSync(file, 'utf8');
@@ -368,6 +380,18 @@ function execute() {
         cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
       });
 
+      if (siteConfig.fonts) {
+        Object.keys(siteConfig.fonts).forEach(key => {
+          const fontString = siteConfig.fonts[key]
+            .map(font => '"' + font + '"')
+            .join(', ');
+          cssContent = cssContent.replace(
+            new RegExp('\\$' + key, 'g'),
+            fontString
+          );
+        });
+      }
+
       fs.writeFileSync(mainCss, cssContent);
     } else if (!fs.lstatSync(file).isDirectory()) {
       let parts = file.split('/static/');

lib/server/server.js

@@ -487,6 +487,18 @@ function execute(port) {
       .string();
     cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
 
+    if (siteConfig.fonts) {
+      Object.keys(siteConfig.fonts).forEach(key => {
+        const fontString = siteConfig.fonts[key]
+          .map(font => '"' + font + '"')
+          .join(', ');
+        cssContent = cssContent.replace(
+          new RegExp('\\$' + key, 'g'),
+          fontString
+        );
+      });
+    }
+
     res.send(cssContent);
   });