Merge pull request #11932 from nextcloud/font-nunito

Change typeface to Nunito

9 files changed, 99 insertions, 62 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index cce21aa26fb..dc05d2b3fbb 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -21,7 +21,7 @@
 h2,
 h3,
 h4 {
-	font-weight: 600;
+	font-weight: bold;
 }
 
 h2 {
@@ -727,7 +727,7 @@ kbd {
 	border-radius: 0;
 	text-align: left;
 	padding-left: 42px;
-	font-weight: 400;
+	font-weight: normal;
 
 	/* like app-navigation a */
 	color: var(--color-main-text);
@@ -746,7 +746,6 @@ kbd {
 .section {
 	display: block;
 	padding: 30px;
-	color: var(--color-text-lighter);
 	margin-bottom: 24px;
 	&.hidden {
 		display: none !important;
@@ -804,7 +803,7 @@ kbd {
 			margin-bottom: 1px;
 		}
 		&.selected {
-			font-weight: 600;
+			font-weight: bold;
 		}
 		&.selected,
 		&:hover,
@@ -921,7 +920,7 @@ $popovericon-size: 16px;
 			align-items: flex-start;
 			height: auto;
 			margin: 0;
-			font-weight: 300;
+			font-weight: normal;
 			box-shadow: none;
 			width: 100%;
 			color: var(--color-main-text);
diff --git a/core/css/fonts.scss b/core/css/fonts.scss
index 441b48f3856..1e0b14af22f 100644
--- a/core/css/fonts.scss
+++ b/core/css/fonts.scss
@@ -1,26 +1,43 @@
-/* for low-res screens, use Regular font-weight instead of Light */
-@media (-webkit-max-device-pixel-ratio: 1.3), (max-resolution: 124.8dpi) {
-	@font-face {
-		font-family: 'Open Sans';
-		font-style: normal;
-		font-weight: normal;
-		src: local('Open Sans'), local('OpenSans'),
-			url('../fonts/OpenSans-Regular.woff') format('woff');
-	}
+/* latin-ext */
+@font-face {
+	font-family: 'Nunito';
+	font-style: normal;
+	font-weight: 400; /* normal */
+	src: local('Nunito Regular'), local('Nunito-Regular'),
+		url('../fonts/Nunito-Regular-latin-ext.woff2') format('woff2'),
+		url('../fonts/Nunito-Regular.ttf') format('truetype');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+	font-family: 'Nunito';
+	font-style: normal;
+	font-weight: 400; /* normal */
+	src: local('Nunito Regular'), local('Nunito-Regular'),
+		url('../fonts/Nunito-Regular.woff2') format('woff2'),
+		url('../fonts/Nunito-Regular.ttf') format('truetype');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+/* latin-ext */
 @font-face {
-	font-family: 'Open Sans';
+	font-family: 'Nunito';
 	font-style: normal;
-	font-weight: 300;
-	src: local('Open Sans Light'), local('OpenSans-Light'),
-		url('../fonts/OpenSans-Light.woff') format('woff');
+	font-weight: 700; /* bold */
+	src: local('Nunito Bold'), local('Nunito-Bold'),
+		url('../fonts/Nunito-Bold-latin-ext.woff2') format('woff2'),
+		url('../fonts/Nunito-Bold.ttf') format('truetype');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
+/* latin */
 @font-face {
-	font-family: 'Open Sans';
+	font-family: 'Nunito';
 	font-style: normal;
-	font-weight: 600;
-	src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
-		url('../fonts/OpenSans-Semibold.woff') format('woff');
+	font-weight: 700; /* bold */
+	src: local('Nunito Bold'), local('Nunito-Bold'),
+		url('../fonts/Nunito-Bold.woff2') format('woff2'),
+		url('../fonts/Nunito-Bold.ttf') format('truetype');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/core/css/guest.css b/core/css/guest.css
index ca15fee1894..70fd8706f3b 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -16,10 +16,10 @@ ul { list-style:none; }
 
 body {
 	background-color: #ffffff;
-	font-weight: 400;
+	font-weight: normal;
 	font-size: .8em;
 	line-height: 1.6em;
-	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+	font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
 	color: #000;
 	text-align: center;
 	background-color: #0082c9;
@@ -56,7 +56,7 @@ em {
 h2,
 h3,
 h4 {
-	font-weight: 600;
+	font-weight: bold;
 }
 
 h2 {
@@ -175,7 +175,7 @@ form #datadirField legend {
 }
 
 input, textarea, select, button, div[contenteditable=true] {
-	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+	font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
 }
 input,
 input:not([type='range']),
@@ -198,7 +198,7 @@ select {
 	min-width: 25px;
 	padding: 12px;
 	background-color: white;
-	font-weight: 600;
+	font-weight: bold;
 	color: #555;
 	border: none;
 	cursor: pointer;
@@ -216,7 +216,7 @@ input[type='email'] {
 	-moz-appearance: textfield;
 	box-sizing: content-box;
 	border: none;
-	font-weight: 300;
+	font-weight: normal;
 }
 input.login {
 	width: 269px;
@@ -421,7 +421,7 @@ form .warning input[type='checkbox']+label {
 	margin: 0;
 }
 .two-factor-provider p {
-	font-weight: 300;
+	font-weight: normal;
 }
 .two-factor-icon {
 	width: 100px;
@@ -456,12 +456,12 @@ form .warning input[type='checkbox']+label {
 	margin: 10px 0;
 	text-align: center;
 	width: 100%;
-	text-shadow: 0 0 2px rgba(0, 0, 0, .4); // better readability on bright background
+	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
 }
 .lost-password-container #lost-password,
 .lost-password-container #lost-password-back {
 	display: inline-block;
-	font-weight: 300;
+	font-weight: normal;
 	padding: 12px;
 	margin-top: -6px;
 	color: #fff;
@@ -607,7 +607,7 @@ form #selectDbType label.ui-state-active {
 .warning a,
 .error a {
 	color: #fff !important;
-	font-weight: 600 !important;
+	font-weight: bold !important;
 	opacity: 1;
 }
 .error a.button {
@@ -652,7 +652,7 @@ fieldset.update legend + p {
 }
 p.info {
 	margin: 20px auto;
-	text-shadow: 0 0 2px rgba(0, 0, 0, .4); // better readability on bright background
+	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -803,7 +803,7 @@ footer {
 }
 
 footer .info .entity-name {
-	font-weight: 600;
+	font-weight: bold;
 }
 
 .hidden {
@@ -823,26 +823,47 @@ a.legal {
 	font-size: smaller;
 }
 
-/* for low-res screens, use Regular font-weight instead of Light */
-@media (-webkit-max-device-pixel-ratio: 1.3), (max-resolution: 124.8dpi) {
-	@font-face {
-		font-family: 'Open Sans';
-		font-style: normal;
-		font-weight: normal;
-		src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff');
-	}
+
+/* latin-ext */
+@font-face {
+	font-family: 'Nunito';
+	font-style: normal;
+	font-weight: 400; /* normal */
+	src: local('Nunito Regular'), local('Nunito-Regular'),
+		url('../fonts/Nunito-Regular-latin-ext.woff2') format('woff2'),
+		url('../fonts/Nunito-Regular.ttf') format('truetype');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
+/* latin */
 @font-face {
-	font-family: 'Open Sans';
+	font-family: 'Nunito';
 	font-style: normal;
-	font-weight: 300;
-	src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/OpenSans-Light.woff') format('woff');
+	font-weight: 400; /* normal */
+	src: local('Nunito Regular'), local('Nunito-Regular'),
+		url('../fonts/Nunito-Regular.woff2') format('woff2'),
+		url('../fonts/Nunito-Regular.ttf') format('truetype');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+/* latin-ext */
 @font-face {
-	font-family: 'Open Sans';
+	font-family: 'Nunito';
 	font-style: normal;
-	font-weight: 600;
-	src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/OpenSans-Semibold.woff') format('woff');
+	font-weight: 700; /* bold */
+	src: local('Nunito Bold'), local('Nunito-Bold'),
+		url('../fonts/Nunito-Bold-latin-ext.woff2') format('woff2'),
+		url('../fonts/Nunito-Bold.ttf') format('truetype');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+	font-family: 'Nunito';
+	font-style: normal;
+	font-weight: 700; /* bold */
+	src: local('Nunito Bold'), local('Nunito-Bold'),
+		url('../fonts/Nunito-Bold.woff2') format('woff2'),
+		url('../fonts/Nunito-Bold.ttf') format('truetype');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/core/css/header.scss b/core/css/header.scss
index af98e20a9d3..a80dbcc6cfb 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -212,7 +212,7 @@
 .header-appname {
 	color: var(--color-primary-text);
 	font-size: 16px;
-	font-weight: 600;
+	font-weight: bold;
 	margin: 0;
 	padding: 0;
 	padding-right: 5px;
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index d28884d0c53..78857b322db 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -286,7 +286,7 @@ button img,
 }
 select,
 .button.multiselect {
-	font-weight: 400;
+	font-weight: normal;
 }
 
 /* Radio & Checkboxes */
diff --git a/core/css/public.scss b/core/css/public.scss
index 0edf391fa49..20048870e2c 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -70,7 +70,7 @@ $footer-height: 65px;
 			color: var(--color-text-lighter);
 			a {
 				color: var(--color-text-lighter);
-				font-weight: 600;
+				font-weight: bold;
 				white-space: nowrap;
 				/* increasing clickability to more than the text height */
 				padding: 13px;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index dc217fb8f22..6f65f00df19 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -84,7 +84,7 @@ ul {
 
 body {
 	background-color: var(--color-main-background);
-	font-weight: 300;
+	font-weight: normal;
 	font-size: .8em;
 	line-height: 1.6em;
 	font-family: var(--font-face);
@@ -327,14 +327,14 @@ label.infield {
 .warning {
 	legend, a {
 		color: var(--color-primary-text) !important;
-		font-weight: 600 !important;
+		font-weight: bold !important;
 	}
 }
 
 .error {
 	a {
 		color: var(--color-primary-text) !important;
-		font-weight: 600 !important;
+		font-weight: bold !important;
 		&.button {
 			color: var(--color-text-lighter) !important;
 			display: inline-block;
@@ -541,7 +541,7 @@ code {
 
 		.ui-datepicker-title {
 			line-height: 1;
-			font-weight: 300;
+			font-weight: normal;
 		}
 		.ui-icon {
 			opacity: .5;
@@ -622,7 +622,7 @@ code {
 
 		.ui-timepicker-title {
 			line-height: 1;
-			font-weight: 300;
+			font-weight: normal;
 		}
 	}
 	/* AM/PM fix */
@@ -1025,7 +1025,7 @@ div.crumb {
 	&:not(:first-child) a {
 	}
 	&:last-child {
-		font-weight: 600;
+		font-weight: bold;
 		margin-right: 10px;
 		// Allow multiple span next to the main 'a'
 		a ~ span {
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index ad433185f1c..a23f5d3c34d 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -13,9 +13,9 @@
 .tooltip {
     position: absolute;
     display: block;
-    font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+    font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
     font-style: normal;
-    font-weight: 400;
+    font-weight: normal;
     letter-spacing: normal;
     line-break: auto;
     line-height: 1.6;
@@ -135,4 +135,4 @@
     height: 0;
     border-color: transparent;
     border-style: solid;
-}
\ No newline at end of file
+}
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 8617c6e27d0..f105118ada1 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -31,7 +31,7 @@
 
 // SCSS variables
 // DEPRECATED, please use CSS4 vars
-$color-main-text: #000 !default;
+$color-main-text: #222 !default; // Not #000 for better readability
 $color-main-background: #fff !default;
 
 // used for different active/disabled states
@@ -75,7 +75,7 @@ $color-border-dark: nc-darken($color-main-background, 14%) !default;
 $border-radius: 3px !default;
 $border-radius-large: 10px;
 
-$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
+$font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
 
 
 // various structure data