V8: Simplify font setup (#4475)

src/Umbraco.Web.UI.Client/src/less/fonts.less

@@ -7,15 +7,19 @@
   Black: font-weight: 900;
 
 */
+@fontPath: '../fonts';
+@latoPath: '@{fontPath}/lato';
+@openSansPath: '@{fontPath}/opensans';
+
 /* Webfont: LatoLatin-Black */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-Black.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-Black.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Black.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Black.ttf') format('truetype');
+    src: local('LatoLatin Black'),
+         local('LatoLatin-Black'),
+         url('@{latoPath}/LatoLatin-Black.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-Black.woff') format('woff'); /* Modern Browsers */
     font-style: normal;
+    font-display: swap;
     font-weight: 900;
     text-rendering: optimizeLegibility;
 }
@@ -23,91 +27,91 @@
 /* Webfont: LatoLatin-BlackItalic */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-BlackItalic.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-BlackItalic.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-BlackItalic.ttf') format('truetype');
+    src: local('LatoLatin BlackItalic'),
+         local('LatoLatin-BlackItalic'),
+         url('@{latoPath}/LatoLatin-BlackItalic.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-BlackItalic.woff') format('woff'); /* Modern Browsers */
     font-style: italic;
     font-weight: 900;
+    font-display: swap;
     text-rendering: optimizeLegibility;
 }
 
 /* Webfont: LatoLatin-Bold */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-Bold.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-Bold.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Bold.ttf') format('truetype');
+    src: local('LatoLatin Bold'),
+         local('LatoLatin-Bold'),
+         url('@{latoPath}/LatoLatin-Bold.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-Bold.woff') format('woff'); /* Modern Browsers */
     font-style: normal;
-    font-weight: bold;
+    font-weight: 700;
+    font-display: swap;
     text-rendering: optimizeLegibility;
 }
 
 /* Webfont: LatoLatin-BoldItalic */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-BoldItalic.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-BoldItalic.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-BoldItalic.ttf') format('truetype');
+    src: local('LatoLatin BoldItalic'),
+         local('LatoLatin-BoldItalic'),
+         url('@{latoPath}/LatoLatin-BoldItalic.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-BoldItalic.woff') format('woff'); /* Modern Browsers */
     font-style: italic;
-    font-weight: bold;
+    font-weight: 700;
+    font-display: swap;
     text-rendering: optimizeLegibility;
 }
 
 /* Webfont: LatoLatin-Italic */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-Italic.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-Italic.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Italic.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Italic.ttf') format('truetype');
+    src: local('LatoLatin Italic'),
+         local('LatoLatin-Italic'),
+         url('@{latoPath}/LatoLatin-Italic.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-Italic.woff') format('woff'); /* Modern Browsers */
     font-style: italic;
-    font-weight: normal;
+    font-weight: 400;
+    font-display: swap;
     text-rendering: optimizeLegibility;
 }
 
 /* Webfont: LatoLatin-Regular */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Regular.ttf') format('truetype');
+    src: local('LatoLatin Regular'),
+         local('LatoLatin-Regular'),
+         url('@{latoPath}/LatoLatin-Regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-Regular.woff') format('woff'); /* Modern Browsers */
     font-style: normal;
-    font-weight: normal;
+    font-weight: 400;
+    font-display: swap;
     text-rendering: optimizeLegibility;
 }
 
 /* Webfont: LatoLatin-Light */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-Light.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-Light.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-Light.ttf') format('truetype');
+    src: local('LatoLatin Light'),
+         local('LatoLatin-Light'),
+         url('@{latoPath}/LatoLatin-Light.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-Light.woff') format('woff'); /* Modern Browsers */
     font-style: normal;
     font-weight: 300;
+    font-display: swap;
     text-rendering: optimizeLegibility;
 }
 
 /* Webfont: LatoLatin-LightItalic */
 @font-face {
     font-family: 'Lato';
-    src: url('../fonts/lato/LatoLatin-LightItalic.eot'); /* IE9 Compat Modes */
-    src: url('../fonts/lato/LatoLatin-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         //url('../fonts/lato/LatoLatin-LightItalic.woff2') format('woff2'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-LightItalic.woff') format('woff'), /* Modern Browsers */
-         url('../fonts/lato/LatoLatin-LightItalic.ttf') format('truetype');
+    src: local('LatoLatin LightItalic'),
+         local('LatoLatin-LightItalic'),
+         url('@{latoPath}/LatoLatin-LightItalic.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{latoPath}/LatoLatin-LightItalic.woff') format('woff'); /* Modern Browsers */
     font-style: italic;
     font-weight: 300;
+    font-display: swap;
     text-rendering: optimizeLegibility;
 }
 
@@ -122,24 +126,22 @@
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../fonts/opensans/OpenSans-Regular-webfont.eot');
-    src: local('Open Sans'), local('OpenSans'),
-         url('../fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'),
-         url('../fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
+    src: local('Open Sans'),
+         local('OpenSans'),
+         url('@{openSansPath}/OpenSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{openSansPath}/OpenSans-Regular.woff') format('woff'); /* Modern Browsers */
     font-weight: 400;
+    font-display: swap;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../fonts/opensans/OpenSans-Semibold-webfont.eot');
-    src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
-         url('../fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'),
-         url('../fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
+    src: local('Open Sans'),
+         local('OpenSans'),
+         url('@{openSansPath}/OpenSans-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
+         url('@{openSansPath}/OpenSans-Semibold.woff') format('woff'); /* Modern Browsers */
     font-weight: 600;
+    font-display: swap;
     font-style: normal;
 }
-
-