font-face separate css and use sans as fallback font

css/clock.css

@@ -1,7 +1,7 @@
 #clock {
 	color: var(--base-color);
 	font-size: 11pt;
-	font-family: roboto-bold;
+	font-family: roboto-bold, sans-serif;
 
 	/*Center lock*/
 	text-align: center;

css/font-face.css

@@ -0,0 +1,47 @@
+
+/* roboto-300 - latin */
+@font-face {
+	font-family: 'roboto-light';
+	font-style: normal;
+	font-weight: 300;
+	src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
+	src: local('Roboto Light'), local('Roboto-Light'),
+		url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+		url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+		url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
+		url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+		url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+/* roboto-regular - latin */
+@font-face {
+	font-family: 'roboto';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
+	src: local('Roboto'), local('Roboto-Regular'),
+		url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+		url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+		url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
+		url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+		url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+
+/* roboto-700 - latin */
+@font-face {
+	font-family: 'roboto-bold';
+	font-style: normal;
+	font-weight: 700;
+	src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
+	src: local('Roboto Bold'), local('Roboto-Bold'),
+		url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+		url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+		url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
+		url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+		url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+
+@font-face {
+	font-family: 'fantasque-sans-mono';
+	font-style: normal;
+	src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
+}

css/greeter-date-message.css

@@ -1,13 +1,13 @@
 #greeterMessage {
 	color: var(--base-color);
 	font-size: 32pt;
-	font-family: roboto-light;
+	font-family: roboto-light, sans-serif;
 	margin: 5px;
 }
 
 #dateMessage {
 	color: #f2f2f2;
 	font-size: 12pt;
-	font-family:  roboto;
+	font-family:  roboto, sans-serif;
 	margin: 5px;
 }

css/search-box.css

@@ -2,7 +2,7 @@
 	background: var(--base-bg);
 	color: var(--base-color);
 	text-align: center;
-	font-family: roboto-bold;
+	font-family: roboto-bold, sans-serif;
 
 	width: 30vw;
 	height: 48px;
@@ -29,7 +29,7 @@
 }
 
 #searchBox::placeholder {
-	font-family: roboto-bold, fantasque-sans-mono;
+	font-family: roboto-bold, fantasque-sans-mono, sans-serif;
 }
 
 .showSearchBox {

css/search-engine-settings.css

@@ -1,5 +1,5 @@
 .searchEngine {
-	font-family: roboto;
+	font-family: roboto, sans-serif;
 	width: 100%;
 	height: auto;
 	position: relative;;

css/style.css

@@ -1,3 +1,4 @@
+@import url('font-face.css');
 @import url('normalize.css');
 @import url('body-background.css');
 @import url('bar.css');
@@ -66,53 +67,6 @@ html, body {
 	position: fixed !important;
 }
 
-/* roboto-300 - latin */
-@font-face {
-  font-family: 'roboto-light';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Roboto Light'), local('Roboto-Light'),
-       url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
-}
-/* roboto-regular - latin */
-@font-face {
-  font-family: 'roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Roboto'), local('Roboto-Regular'),
-       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
-}
-
-/* roboto-700 - latin */
-@font-face {
-  font-family: 'roboto-bold';
-  font-style: normal;
-  font-weight: 700;
-  src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
-  src: local('Roboto Bold'), local('Roboto-Bold'),
-       url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
-}
-
-@font-face {
-	font-family: 'fantasque-sans-mono';
-	font-style: normal;
-	src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
-}
-
 /*Scrollbar*/
 
 /*Placeholder*/

css/theme-engine.css

@@ -1,5 +1,5 @@
 .themeEngine {
-	font-family: roboto;
+	font-family: roboto, sans-serif;
 	width: 100%;
 	height: auto;
 	position: relative;;

css/weather-screen.css

@@ -72,7 +72,7 @@
 
 #weatherTodayLocation {
 	color: var(--base-color);
-	font-family: roboto;
+	font-family: roboto, sans-serif;
 	font-size: 16pt;
 	text-align: center;
 	position: relative;
@@ -80,7 +80,7 @@
 
 #weatherTodayDescription {
 	color: var(--base-color);
-	font-family: roboto-bold;
+	font-family: roboto-bold, sans-serif;
 	font-size: 20pt;
 	text-align: center;
 	position: relative;
@@ -104,7 +104,7 @@
 
 .hourDataLabel {
 	color: var(--base-color);
-	font-family: roboto;
+	font-family: roboto, sans-serif;
 	font-size: 14pt;
 	text-align: center;
 }
@@ -177,7 +177,7 @@
 .weatherForecastDayDetailsDescription,
 .weatherForecastDayDate {
 	color: var(--base-color);
-	font-family: roboto;
+	font-family: roboto, sans-serif;
 	font-size: 11pt;
 	text-align: center;
 }

css/weather-settings.css

@@ -1,5 +1,5 @@
 .weatherSettings {
-	font-family: roboto;
+	font-family: roboto, sans-serif;
 	width: 100%;
 	height: auto;
 	position: relative;;

css/web-menu.css

@@ -69,7 +69,7 @@
 	background: var(--base-container);
 	
 	text-align: center;
-	font-family: roboto-bold;
+	font-family: roboto-bold, sans-serif;
 	color: var(--panel-color);
 	
 	border: none;
@@ -81,7 +81,7 @@
 }
 
 #webMenuSearchBox::placeholder {
-	font-family: roboto-bold, fantasque-sans-mono;
+	font-family: roboto-bold, fantasque-sans-mono, sans-serif;
 }
 
 @media screen and (max-width: 580px) {
@@ -200,7 +200,7 @@
 .webItemName {
 	text-align: center;
 	font-size: 11pt;
-	font-family: roboto;
+	font-family: roboto, sans-serif;
 	word-wrap: break-word;
 	color: var(--base-color);