font-face separate css and use sans as fallback font

This commit is contained in:
Gerome Matilla 2020-06-05 11:13:41 +08:00
parent 9e61d679f0
commit dd15d19a11
10 changed files with 63 additions and 62 deletions

View File

@ -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;

47
css/font-face.css Normal file
View File

@ -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');
}

View File

@ -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;
}

View File

@ -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 {

View File

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

View File

@ -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*/

View File

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

View File

@ -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;
}

View File

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

View File

@ -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);