Change font to Manrope

assets/index.css

@@ -1,13 +1,52 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "Manrope";
+  src: url("/assets/fonts/web/Manrope-Bold.woff2") format("woff2"),
+    url("/assets/fonts/otf/Manrope-Bold.otf") format("opentype");
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: "Manrope";
+  src: url("/assets/fonts/web/Manrope-SemiBold.woff2") format("woff2"),
+    url("/assets/fonts/otf/Manrope-SemiBold.otf") format("opentype");
+  font-style: normal;
+  font-weight: 600;
+}
+@font-face {
+  font-family: "Manrope";
+  src: url("/assets/fonts/web/Manrope-Medium.woff2") format("woff2"),
+    url("/assets/fonts/otf/Manrope-Medium.otf") format("opentype");
+  font-style: normal;
+  font-weight: 500;
+}
+@font-face {
+  font-family: "Manrope";
+  src: url("/assets/fonts/web/Manrope-Regular.woff2") format("woff2"),
+    url("/assets/fonts/otf/Manrope-Regular.otf") format("opentype");
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: "Manrope";
+  src: url("/assets/fonts/web/Manrope-Light.woff2") format("woff2"),
+    url("/assets/fonts/otf/Manrope-Light.otf") format("opentype");
+  font-style: normal;
+  font-weight: 300;
+}
+
 body {
   align-items: center;
   background: var(--bg-color);
   color: var(--text-color);
-  font-family: "Poppins", sans-serif;
+  font-family: "Manrope", sans-serif;
   margin: 0%;
   max-width: 100vw;
   overflow-x: hidden;
   padding: 0%;
   width: 100vw;
+  font-feature-settings: "calt", "liga";
 }
 
 #profile {
@@ -31,7 +70,6 @@ body {
   padding: 4vh 3vw;
   padding-left: 33vw;
   width: 64vw;
-  .;
 }
 
 #display h1 {
@@ -88,7 +126,7 @@ body {
 
 #footer a {
   color: var(--text-color) !important;
-  font-family: "Poppins", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: bold;
   text-decoration: none;
 }

assets/index.html

@@ -16,7 +16,7 @@
       crossorigin="anonymous"
     ></script>
     <link
-      href="https://fonts.googleapis.com/css?family=Asap|Asap+Condensed|Poppins&display=swap"
+      href="https://fonts.googleapis.com/css?family=Asap|Asap+Condensed&display=swap"
       rel="stylesheet"
     />
     <script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>

build.js

@@ -1,11 +1,11 @@
-/* Filepath utilities */
+// Filepath utilities
 const path = require("path");
-/* Promise library */
+// Promise library
 const bluebird = require("bluebird");
 const hbs = require("handlebars");
-/*  Creates promise-returning async functions
-    from callback-passed async functions      */
+//  Creates promise-returning async functions from callback-passed async functions
 const fs = bluebird.promisifyAll(require("fs"));
+const fse = require("fs-extra");
 const { updateHTML } = require("./populate");
 const { getConfig, outDir } = require("./utils");
 
@@ -22,10 +22,12 @@ async function populateCSS({
   theme = "light",
   background = "https://source.unsplash.com/1280x720/?wallpaper"
 } = {}) {
-  /* Get the theme the user requests. Defaults to 'light' */
+  // Get the theme the user requests. Defaults to 'light'
   theme = `${theme}.css`;
   const template = path.resolve(assetDir, "index.css");
   const stylesheet = path.join(outDir, "index.css");
+  const tempfont = path.resolve(assetDir, "fonts");
+  const fonts = path.join(outDir, "assets/fonts");
 
   try {
     await fs.accessAsync(outDir, fs.constants.F_OK);
@@ -33,10 +35,13 @@ async function populateCSS({
     await fs.mkdirAsync(outDir);
   }
 
-  /* Copy over the template CSS stylesheet */
+  // Copy over the template CSS stylesheet
   await fs.copyFileAsync(template, stylesheet);
 
-  /* Get an array of every available theme */
+  // Copy Fonts
+  fse.copySync(tempfont, fonts);
+
+  // Get an array of every available theme
   const themes = await fs.readdirAsync(path.join(assetDir, "themes"));
 
   if (!themes.includes(theme)) {
@@ -44,17 +49,17 @@ async function populateCSS({
     theme = "light";
   }
 
-  /* Read in the theme stylesheet */
+  // Read in the theme stylesheet
   let themeSource = await fs.readFileSync(path.join(assetDir, "themes", theme));
   themeSource = themeSource.toString("utf-8");
   const themeTemplate = hbs.compile(themeSource);
   const styles = themeTemplate({
     background: `${background}`
   });
-  /* Add the user-specified styles to the new stylesheet */
+  // Add the user-specified styles to the new stylesheet
   await fs.appendFileAsync(stylesheet, styles);
 
-  /* Update the config file with the user's theme choice */
+  // Update the config file with the user's theme choice
   const data = await getConfig();
   data[0].theme = theme;
   await fs.writeFileAsync(config, JSON.stringify(data, null, " "));

package-lock.json

@@ -1430,6 +1430,16 @@
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
     },
+    "fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2019,6 +2029,14 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -4062,6 +4080,11 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package.json

@@ -39,6 +39,7 @@
     "commander": "^2.20.0",
     "ejs": "^3.0.1",
     "express": "^4.17.0",
+    "fs-extra": "8.1.0",
     "github-emoji": "^1.1.1",
     "got": "^10.2.2",
     "handlebars": "^4.1.2",