style(fonts): Nunito font <3

frontend/dist/index.tpl.html

@@ -32,8 +32,7 @@
 	<meta name='theme-color' content='#03a9f4'>
 	<meta name='google' content='nositelinkssearchbox' />
 
-	<link href='https://fonts.googleapis.com/css?family=Roboto:100,400|Pacifico' rel='stylesheet'>
-	<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
+	<link href="https://fonts.googleapis.com/css?family=Material+Icons|Nunito+Sans:200,300,400,600,700|Nunito:200,300,400,600,700|Roboto:100,300,400,500&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
 	<link rel='stylesheet' href='/index.css'>
 	<script src='https://www.youtube.com/iframe_api'></script>

frontend/scss/global.scss

@@ -1,13 +1,13 @@
 @import 'variables/colors.scss';
+@import 'variables/fonts.scss';
 
 html {
 	overflow: auto !important;
+	color: $dark-grey;
 }
 
-body {
-	background-color: $light-grey;
-	color: $dark-grey;
-	font-family: "Roboto", Helvetica, Arial, sans-serif;
+body, button, input, select, textarea {
+    font-family: $nunitoFont;
 }
 
 a {
@@ -15,6 +15,10 @@ a {
 	text-decoration: none;
 }
 
+.app {
+	background-color: $light-grey;
+}
+
 .modal-card {
 	margin: 0 !important;
 }

frontend/scss/variables/fonts.scss

@@ -0,0 +1,3 @@
+$robotoFont: "Roboto", Helvetica, Arial, sans-serif;
+$nunitoFont: "Nunito", Helvetica, Arial, sans-serif;
+$nunitoSansFont: "Nunito Sans", Helvetica, Arial, sans-serif;