feat(css) add "Nunito" css font (PR #2035)

Author: panaC

src/renderer/assets/fonts/nunito.ttf

@@ -30,6 +30,7 @@ import { toastActions } from "readium-desktop/common/redux/actions";
 import { ToastType } from "readium-desktop/common/models/toast";
 
 import { acceptedExtensionArray } from "readium-desktop/common/extension";
+import Nunito from "readium-desktop/renderer/assets/fonts/nunito.ttf";
 
 export default class App extends React.Component<{}, undefined> {
 
@@ -89,6 +90,32 @@ export default class App extends React.Component<{}, undefined> {
         const history = diLibraryGet("history"); // diRendererSymbolTable.history
         const translator = diLibraryGet("translator"); // diRendererSymbolTable.translator
 
+
+        // FIXME: try a better way to import Nunito in CSS font face instead of in React render function.
+        // One possibility is to add css font in ejs html template file from webpack
+        try {
+            const nunitoFontStyleID = "nunitoFontStyleID";
+            const el = document.getElementById(nunitoFontStyleID);
+            if (!el) {
+                const css = `
+        @font-face {
+            font-family: "Nunito";
+            font-style: normal;
+            font-weight: normal;
+            src: local("Nunito"),
+            url("${Nunito}") format("truetype");
+        }
+
+                `;
+                const el = document.createElement("style");
+                el.setAttribute("type", "text/css");
+                el.appendChild(document.createTextNode(css));
+                document.head.appendChild(el);
+            }
+        } catch (e) {
+            console.error("Nunito font face error", e);
+        }
+
         return (
             <Provider store={store} >
                 <TranslatorContext.Provider value={translator}>

src/renderer/library/components/App.tsx

@@ -17,6 +17,7 @@ import ToastManager from "readium-desktop/renderer/common/components/toast/Toast
 import { TranslatorContext } from "readium-desktop/renderer/common/translator.context";
 import DialogManager from "readium-desktop/renderer/reader/components/dialog/DialogManager";
 import { diReaderGet } from "readium-desktop/renderer/reader/di";
+import Nunito from "readium-desktop/renderer/assets/fonts/nunito.ttf";
 
 import Reader from "./Reader";
 
@@ -79,6 +80,8 @@ font-style: normal;
 font-weight: normal;
 src: local("iAWriterDuospace-Regular"),
 url("${rcssPath}/fonts/iAWriterDuospace-Regular.ttf") format("truetype");
+}
+
         `;
                 el = document.createElement("style");
                 el.setAttribute("id", readiumCssFontFaceStyleID);
@@ -90,6 +93,31 @@ url("${rcssPath}/fonts/iAWriterDuospace-Regular.ttf") format("truetype");
             console.log("PROBLEM LOADING READER FONT FACE? ", e);
         }
 
+        // FIXME: try a better way to import Nunito in CSS font face instead of in React render function.
+        // One possibility is to add css font in ejs html template file from webpack
+        try {
+            const nunitoFontStyleID = "nunitoFontStyleID";
+            const el = document.getElementById(nunitoFontStyleID);
+            if (!el) {
+                const css = `
+@font-face {
+    font-family: "Nunito";
+    font-style: normal;
+    font-weight: normal;
+    src: local("Nunito"),
+    url("${Nunito}") format("truetype");
+}
+
+                `;
+                const el = document.createElement("style");
+                el.setAttribute("type", "text/css");
+                el.appendChild(document.createTextNode(css));
+                document.head.appendChild(el);
+            }
+        } catch (e) {
+            console.error("Nunito font face error", e);
+        }
+
         return (
             <Provider store={store}>
                 <TranslatorContext.Provider value={translator}>

src/renderer/reader/components/App.tsx

@@ -35,3 +35,8 @@ declare module "*.svg" {
     const props: IProps;
     export default props;
 }
+
+declare module "*.ttf" {
+    const value: any;
+    export default value;
+}

typings.d.ts

@@ -295,6 +295,11 @@ let config = Object.assign(
                     loader: "svg-sprite-loader",
                     test: /\.svg$/,
                 },
+                {
+                    test: /\.ttf$/,
+                    type: "asset/resource",
+                },
+                // useful ?
                 {
                     exclude: /src/,
                     // loader: "file-loader?name=assets/[name].[md5:hash].[ext]",

webpack.config.renderer-library.js

@@ -293,6 +293,11 @@ let config = Object.assign(
                     loader: "svg-sprite-loader",
                     test: /\.svg$/,
                 },
+                {
+                    test: /\.ttf$/,
+                    type: "asset/resource",
+                },
+                // useful ?
                 {
                     exclude: /src/,
                     // loader: "file-loader?name=assets/[name].[md5:hash].[ext]",