Add possibility to change fonts. This fixes #88

README.md

@@ -104,18 +104,39 @@ Set the environment variable `REACT_APP_RADAR_NAME`. The default is "AOE Technol
 To host the application under a sub path, set the environment variable `PUBLIC_URL`, e.g. "/techradar". The default is "/build".
 
 ### Change the favicon
-To change the favicon, create a public folder in your application and put your favicon.ico in it.
+To change the favicon, create a public folder in your application and put your `favicon.ico` in it.
 
 ### Change the logo
-To change the logo, create a public folder in your application and put your logo.svg in it.
+To change the logo, create a public folder in your application and put your `logo.svg` in it.
 For reference have a look at [public/logo.svg](./public/logo.svg).
 
 ### Change the index.html
-To change the index.html, create a public folder in your application and put your index.html in it.
+To change the index.html, create a public folder in your application and put your `index.html` in it.
 For reference have a look at [public/index.html](./public/index.html).
 
+### Change the fonts
+To change the fonts, create a public folder in your application and put your fonts in it.
+Create a `fonts.css` in the public folder and load your fonts.
+> For now only 2 fonts will be used: `DIN normal` and `DIN 300`.
+> Therefore, you only can replace the font files itself, but need to use the font-family and font-weight.
+```css
+@font-face {
+    font-family: "DIN";
+    src: url("fonts/yourFontFileForNormal");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "DIN";
+    src: url("fonts/yourFontFileForThin");
+    font-weight: 300;
+}
+```
+
+For reference have a look at [public/fonts.css](./public/fonts.css).
+
 ### Add social links to the footer and sidebar
-To add social links, create a public folder in your application and put a messages.json in it.
+To add social links, create a public folder in your application and put a `messages.json` in it.
 ```json
 {
   "socialLinks": [
@@ -129,7 +150,7 @@ To add social links, create a public folder in your application and put a messag
 > For more information and the possible icon names see the source code of the [SocialLink Component](./src/components/SocialLink/SocialLink.tsx).
 
 ### Add a legal information link to the footer and sidebar
-To add a link to legal information, create a public folder in your application and put a messages.json in it.
+To add a link to legal information, create a public folder in your application and put a `messages.json` in it.
 ```json
 {
   "legalInformationLink": "https://www.aoe.com/en/imprint.html"
@@ -137,7 +158,7 @@ To add a link to legal information, create a public folder in your application a
 ```
 
 ### Add a footnote with the logo to the footer
-To add a footnote to the footer, create a public folder in your application and put a messages.json in it.
+To add a footnote to the footer, create a public folder in your application and put a `messages.json` in it.
 ```json
 {
   "footerFootnote": "AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers."
@@ -145,7 +166,7 @@ To add a footnote to the footer, create a public folder in your application and
 ```
 
 ### Add a help page with explanations
-To add a help page, create a public folder in your application and put a messages.json in it.
+To add a help page, create a public folder in your application and put a `messages.json` in it.
 ```json
 {
   "pageHelp": {

public/fonts.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: "DIN";
+    src: url("fonts/clanot-news.otf");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "DIN";
+    src: url("fonts/clanot-thin.otf");
+    font-weight: 300;
+}

public/index.html

@@ -6,6 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="%REACT_APP_RADAR_NAME%" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/fonts.css">
     <meta property="og:title" content="%REACT_APP_RADAR_NAME%" />
     <meta property="og:image" content="%PUBLIC_URL%/logo.svg" />
 

src/components/App.tsx

@@ -30,7 +30,7 @@ const useFetch = <D extends unknown>(url: string): D | undefined => {
       .catch((error) => {
         console.error(`fetch ${url} failed. Did the file exist?`, error);
       });
-  }, []);
+  }, [url]);
 
   return data;
 };

src/index.scss

@@ -1,15 +1,3 @@
-@font-face {
-  font-family: "DIN";
-  src: url("./fonts/clanot-news.otf");
-  font-weight: normal;
-}
-
-@font-face {
-  font-family: "DIN";
-  src: url("./fonts/clanot-thin.otf");
-  font-weight: 300;
-}
-
 :root {
   --color-gray-dark: #475157;
   --color-gray-dark-alt: #4f585e;