Use custom fonts in PDF (#19)

* wip: script to get the base64 string of the font

* feat: add custom fonts in PDF

* fonts: update font name

* chore: update package version

* refactor: try/catch pdf font setting; setting font css

* docs: update readme and add glyphr project

* cleanup: remove console.log

README.md

@@ -30,9 +30,11 @@ For generating the problems, there's several configuration options:
 
 For generating the PDFs, there's a couple options to change:
 
+- Set the font used in the generated PDF
+  - If something fails, this will fall back to using the default Courier font
 - Add the header to the first page
   - Header is simply `NAME: ________ DATE: ______`, like back in school
-- Show the answers on the page (an answer sheet)
+- Show the answers on the page (like an answer sheet)
 
 ## Status
 
@@ -41,7 +43,6 @@ It's at the MVP stage right now with basic functionality available.
 There are a couple features still in-progress:
 
 - Use alternative notations, such as the long-division notation
-- Using custom fonts in the PDF (only Courier is available in the PDF for now)
 
 See [ISSUES](https://github.com/sphars/math-sheets/issues) for details about upcoming features.
 
@@ -65,6 +66,8 @@ and the output `./dist` directory can be deployed where ever you'd like. See the
 
 ## Credits
 
+My dad, for making us kids do math during summer breaks. This was the inspiration for this project. Thanks Dad!
+
 ### Design
 
 - [98.css](https://jdan.github.io/98.css/) for the awesome CSS library
@@ -77,18 +80,14 @@ and the output `./dist` directory can be deployed where ever you'd like. See the
 
 ### Fonts
 
+- [Glyphr Studio](https://www.glyphrstudio.com/) for font editing (project file in repo root)
 - [Dotrice](https://www.1001fonts.com/dotrice-font.html) (dot matrix style font) by Paul Flo Williams, modified by me to add some additional characters:
   - Division Sign `÷`
   - Multiplication Sign `×`
-- [Courier](https://github.com/dse/font-og-courier)
-- [Noto Sans Mono](https://fonts.google.com/specimen/Noto+Sans+Mono)
 - [Chivo Mono](https://fonts.google.com/specimen/Chivo+Mono)
+- [Courier](https://github.com/dse/font-og-courier)
 - [Inconsolata](https://fonts.google.com/specimen/Inconsolata)
-- [Space Mono](https://fonts.google.com/specimen/Space+Mono)
+- [Noto Sans Mono](https://fonts.google.com/specimen/Noto+Sans+Mono)
 - [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
+- [Space Mono](https://fonts.google.com/specimen/Space+Mono)
 - [Roboto Flex](https://fonts.google.com/specimen/Roboto+Flex)
-
-### Other
-
-- [Glyphr Studio](https://www.glyphrstudio.com/) for font editing
-- My dad for making us kids do math during summer breaks

index.html

@@ -5,10 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Math Sheets</title>
 
-    <meta
-      name="description"
-      content="Generate simple math worksheets in the browser and print using a generated PDF file."
-    />
+    <meta name="description" content="Generate PDF worksheets of simple math problems in the browser." />
     <link rel="canonical" href="https://www.mathsheets.net" />
 
     <!-- Open Graph meta -->
@@ -213,14 +210,12 @@
           <div class="window-body spaced">
             <p>
               Due to differences in HTML vs PDF rendering, the PDF will not look quite the same as what you see below.
-              But you get the gist of it.
+              But it'll be pretty close.
             </p>
             <div class="fields">
               <div class="field-row">
                 <label for="font-select">Font</label>
-                <select name="font-select" id="font-select" disabled>
-                  <option value="courier">Courier</option>
-                </select>
+                <select name="font-select" id="font-select"></select>
               </div>
               <div class="field-row">
                 <input type="checkbox" name="with-header" id="with-header" />
@@ -240,7 +235,7 @@
                   <div>Date: <span class="line-bottom"></span></div>
                 </div>
                 <div id="page-content"></div>
-                <div id="page-footer">Created with <a href="https://www.mathsheets.net">Math Sheets</a></div>
+                <div id="page-footer">Created with mathsheets.net</div>
               </div>
             </div>
 
@@ -254,10 +249,18 @@
           </div>
         </div>
       </div>
-      <div id="bg-switcher">
-        <select title="Switch the background tiles">
-          <option value="none">none</option>
-        </select>
+      <div class="window" id="bg-switcher">
+        <div class="title-bar">
+          <div class="title-bar-text">Background</div>
+          <div class="title-bar-controls">
+            <button aria-label="Help"></button>
+          </div>
+        </div>
+        <div class="window-body">
+          <select title="Switch the background tiles">
+            <option value="none">none</option>
+          </select>
+        </div>
       </div>
     </div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "math-sheets",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "description": "Generate PDF worksheets of simple math problems in the browser.",
   "scripts": {

scripts/generateFontCSS.js

@@ -14,11 +14,11 @@ async function createFontCSS(fonts, filePath = "./src/fonts.css") {
 
     const cssContent = fonts
       .map((font) => {
-        if (!font.url) return;
+        if (!font.file) return;
 
         return `@font-face {
   font-family: "${font.name}";
-  src: url("${font.url}") format("${font.format}");
+  src: url("/fonts/${font.file}") format("${font.format}");
   font-weight: ${font.weight ? font.weight : "normal"};
   font-style: ${font.style ? font.style : "normal"};
 }`;

src/fonts.json

@@ -3,43 +3,43 @@
     {
       "name": "Courier",
       "family": "Courier, monospace",
-      "url": "/fonts/Courier.ttf",
+      "file": "Courier.ttf",
       "format": "truetype"
     },
     {
       "name": "Noto Sans Mono",
       "family": "'Noto Sans Mono', monospace",
-      "url": "/fonts/NotoSansMono-Regular.ttf",
+      "file": "NotoSansMono-Regular.ttf",
       "format": "truetype"
     },
     {
       "name": "Dotrice",
       "family": "Dotrice, monospace",
-      "url": "/fonts/Dotrice-Regular.ttf",
+      "file": "Dotrice-Regular.ttf",
       "format": "truetype"
     },
     {
       "name": "Roboto Mono",
       "family": "'Roboto Mono', monospace",
-      "url": "/fonts/RobotoMono-Regular.ttf",
+      "file": "RobotoMono-Regular.ttf",
       "format": "truetype"
     },
     {
       "name": "Chivo Mono",
       "family": "'Chivo Mono', monospace",
-      "url": "/fonts/ChivoMono-Regular.ttf",
+      "file": "ChivoMono-Regular.ttf",
       "format": "truetype"
     },
     {
       "name": "Inconsolata",
       "family": "Inconsolata, monospace",
-      "url": "/fonts/Inconsolata-Regular.ttf",
+      "file": "Inconsolata-Regular.ttf",
       "format": "truetype"
     },
     {
       "name": "Space Mono",
       "family": "'Space Mono', monospace",
-      "url": "/fonts/SpaceMono-Regular.ttf",
+      "file": "SpaceMono-Regular.ttf",
       "format": "truetype"
     }
   ]

src/interfaces.ts

@@ -1,6 +1,7 @@
 export interface Font {
   name: string;
   family: string;
+  file: string;
   url?: string;
   format?: string;
   weight?: string | number;