diff --git a/public/fonts/fonts.css b/public/fonts/fonts.css
deleted file mode 100644
index 8b2f9c617..000000000
--- a/public/fonts/fonts.css
+++ /dev/null
@@ -1,119 +0,0 @@
-/* quicksand-300 - latin */
-@font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 300;
-	font-display: swap;
-	src: url('quicksand-v7-latin-300.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Light'), local('Quicksand-Light'),
-	url('quicksand-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('quicksand-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-300.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* quicksand-regular - latin */
-@font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url('quicksand-v7-latin-regular.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Regular'), local('Quicksand-Regular'),
-	url('quicksand-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('quicksand-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* quicksand-500 - latin */
-@font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 500;
-	font-display: swap;
-	src: url('quicksand-v7-latin-500.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Medium'), local('Quicksand-Medium'),
-	url('quicksand-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('quicksand-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-500.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* quicksand-700 - latin */
-@font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: url('quicksand-v7-latin-700.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Bold'), local('Quicksand-Bold'),
-	url('quicksand-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('quicksand-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-700.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-regular - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url('open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Regular'), local('OpenSans-Regular'),
-	url('open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-italic - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 400;
-	font-display: swap;
-	src: url('open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Italic'), local('OpenSans-Italic'),
-	url('open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-700 - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: url('open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Bold'), local('OpenSans-Bold'),
-	url('open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-700italic - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 700;
-	font-display: swap;
-	src: url('open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
-	url('open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url('open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
diff --git a/public/index.html b/public/index.html
index dcc686eb6..c1f11877d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,6 @@
 	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-regular.woff2" as="font">
 	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-700.woff2" as="font">
 	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/quicksand-v7-latin-regular.woff2" as="font">
-	<link href="<%= BASE_URL %>fonts/fonts.css" rel="stylesheet">
 </head>
 <body>
 <noscript>
diff --git a/src/styles/theme/fonts.scss b/src/styles/theme/fonts.scss
new file mode 100644
index 000000000..1be109ade
--- /dev/null
+++ b/src/styles/theme/fonts.scss
@@ -0,0 +1,121 @@
+$font-files-path: '../../public/fonts/';
+
+/* quicksand-300 - latin */
+@font-face {
+	font-family: 'Quicksand';
+	font-style: normal;
+	font-weight: 300;
+	font-display: swap;
+	src: url($font-files-path + 'quicksand-v7-latin-300.eot'); /* IE9 Compat Modes */
+	src: local('Quicksand Light'), local('Quicksand-Light'),
+	url($font-files-path + 'quicksand-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'quicksand-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-300.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'quicksand-v7-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
+}
+
+/* quicksand-regular - latin */
+@font-face {
+	font-family: 'Quicksand';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url($font-files-path + 'quicksand-v7-latin-regular.eot'); /* IE9 Compat Modes */
+	src: local('Quicksand Regular'), local('Quicksand-Regular'),
+	url($font-files-path + 'quicksand-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'quicksand-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'quicksand-v7-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
+}
+
+/* quicksand-500 - latin */
+@font-face {
+	font-family: 'Quicksand';
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url($font-files-path + 'quicksand-v7-latin-500.eot'); /* IE9 Compat Modes */
+	src: local('Quicksand Medium'), local('Quicksand-Medium'),
+	url($font-files-path + 'quicksand-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-500.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'quicksand-v7-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
+}
+
+/* quicksand-700 - latin */
+@font-face {
+	font-family: 'Quicksand';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url($font-files-path + 'quicksand-v7-latin-700.eot'); /* IE9 Compat Modes */
+	src: local('Quicksand Bold'), local('Quicksand-Bold'),
+	url($font-files-path + 'quicksand-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-700.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'quicksand-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'quicksand-v7-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
+}
+
+/* open-sans-regular - latin */
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url($font-files-path + 'open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
+	src: local('Open Sans Regular'), local('OpenSans-Regular'),
+	url($font-files-path + 'open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+
+/* open-sans-italic - latin */
+@font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url($font-files-path + 'open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
+	src: local('Open Sans Italic'), local('OpenSans-Italic'),
+	url($font-files-path + 'open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+
+/* open-sans-700 - latin */
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url($font-files-path + 'open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
+	src: local('Open Sans Bold'), local('OpenSans-Bold'),
+	url($font-files-path + 'open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+
+/* open-sans-700italic - latin */
+@font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url($font-files-path + 'open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
+	src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+	url($font-files-path + 'open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url($font-files-path + 'open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
+	url($font-files-path + 'open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
+	url($font-files-path + 'open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index fb3f40bf0..2946e08d4 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -1,5 +1,7 @@
 @import '../../../node_modules/bulma/bulma';
 
+@import 'fonts';
+
 @import 'variables-derived';
 
 *, *:hover, *:active, *:focus {