Add base font

Author: patrick91

frontend/.storybook/preview-head.html

@@ -1 +1 @@
-<link href="https://fonts.googleapis.com/css?family=Rubik:500,700" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">

frontend/public/index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000">
 
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Rubik:500,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

frontend/src/components/typography/index.tsx

@@ -36,7 +36,7 @@ const BaseTypography = styled<TypographyProps, 'h1'>('h1')`
 `;
 
 interface TitleProps {
-  level: 1 | 2 | 3 | 4 | 5 | 6;
+  level: 1 | 2 | 3;
   children: React.ReactNode;
 }
 
@@ -62,8 +62,10 @@ const BaseTitle = ({
 export const Title = withTheme<TitleProps, Theme>(BaseTitle);
 
 const BaseParagraph = withProps({
+  fontFamily: 'base',
   fontSize: 'body',
-  lineHeight: 'body'
+  lineHeight: 'body',
+  mb: 3
 })(BaseTypography.withComponent('p'));
 
 export const Paragraph = withTheme<{}, Theme>(BaseParagraph);

frontend/src/theme/index.ts

@@ -41,7 +41,8 @@ const borders = [0, '1px solid', '2px solid'];
 const shadows = [`0 1px 2px 0 ${colors.text}`, `0 1px 4px 0 ${colors.text}`];
 
 const fonts = {
-  title: 'Rubik'
+  title: 'Rubik',
+  base: 'Roboto Mono',
 };
 
 export const theme = {