change(docusaurus): use Roboto font from google fonts also for docusa…

…urus

- in the typographic guide it makes sense to actually implement the values that are
  described and the best way to see how they look is to use the same font

website/docs/webdev/3-Guidelines/1-typography.mdx

@@ -74,7 +74,7 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
             <h1>Heading 1</h1>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 48px or 3rem  <br/> Letter spacing: -1.5%</b>
+            <b>Font: Roboto   Size: 44x or 2.75rem  <br/> Letter spacing: -1.5%</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center' , height: '120px' }}>

website/docusaurus.config.js

@@ -79,6 +79,9 @@ module.exports = {
       copyright: `Copyright © ${new Date().getFullYear()} EEA. Built with Docusaurus.`,
     },
   },
+  stylesheets: [
+    'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic,700italic&display=swap',
+  ],
   presets: [
     [
       '@docusaurus/preset-classic',

website/src/css/custom.css

@@ -15,6 +15,8 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
+  --ifm-font-family-base: 'Roboto', sans-serif;
+  --ifm-heading-font-family: 'Roboto', sans-serif;
   --ifm-heading-line-height: 1.2;
   --ifm-h1-font-size: 2.75rem;
   --ifm-h2-font-size: 2rem;
@@ -39,6 +41,10 @@
   --ifm-h1-font-size: 1.875rem;
 }
 
+html {
+  font-family: 'Roboto', sans-serif;
+}
+
 body {
   line-height: 1.5;
 }