Use only system fonts

This commit changes how fonts are used.

- remove usage of bundled fonts and only system fonts are used instead
  - by using alias in httpd conf
  - by using local("Font Name") directive in font-face
- removed usage of overpass font
- redefined Open Sans font-face declarations. Note: upstream is doing the
  same change so we will be fine on upgrade.
- introduce variable.less for variable definitions and overrides. This file
  will be very useful when we upgrade to newer RCUE so we will be able to
  redefine their and bootstrap's variables.

Fixes: https://fedorahosted.org/freeipa/ticket/2861

8 files changed, 86 insertions, 120 deletions

diff --git a/install/ui/less/font-awesome/path.less b/install/ui/less/font-awesome/path.less
index c5a691246..7d7395d48 100644
--- a/install/ui/less/font-awesome/path.less
+++ b/install/ui/less/font-awesome/path.less
@@ -3,12 +3,7 @@
 
 @font-face {
   font-family: 'FontAwesome';
-  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
-  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
-    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
-    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
-    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
-//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  src:  url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/install/ui/less/font-awesome/variables.less b/install/ui/less/font-awesome/variables.less
index 1a65fe2d9..ee2d2bdb9 100644
--- a/install/ui/less/font-awesome/variables.less
+++ b/install/ui/less/font-awesome/variables.less
@@ -1,7 +1,7 @@
 // Variables
 // --------------------------
 
-@fa-font-path:        "../font";
+@fa-font-path:        "../fonts/fontawesome";
 //@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts"; // for referencing Bootstrap CDN font files directly
 @fa-css-prefix:       fa;
 @fa-version:          "4.0.3";
diff --git a/install/ui/less/rcue.less b/install/ui/less/rcue.less
index a16376881..ffd221209 100644
--- a/install/ui/less/rcue.less
+++ b/install/ui/less/rcue.less
@@ -1,6 +1,7 @@
 /* Red Hat Common User Experience (RCUE) */
 
 @import "font-awesome/font-awesome";
+@import "variables";
 @import "rcue/font";
 @import "rcue/navbar";
 @import "rcue/buttons";
diff --git a/install/ui/less/rcue/buttons.less b/install/ui/less/rcue/buttons.less
index 8110a7fbf..dd7b04bec 100644
--- a/install/ui/less/rcue/buttons.less
+++ b/install/ui/less/rcue/buttons.less
@@ -14,7 +14,8 @@
   -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.1);
   box-shadow: 0 2px 3px rgba(0,0,0,.1);
   color: #4d5258;
-  font-family: OpenSansSemiBold, Helvetica, Arial, sans-serif;
+  font-family: @font-family-base;
+  font-weight: 600;
   font-size: 11px;
   padding: 2px 15px;
   text-shadow: none;
@@ -53,8 +54,9 @@
 }
 
 .btn-mini {
-  font-family: OpenSansRegular, Helvetica, Arial, sans-serif;
+  font-family: @font-family-base;
   font-size: 11px;
+  font-weight: normal;
   line-height: 18px;
   padding: 0 11px;
 }
diff --git a/install/ui/less/rcue/font.less b/install/ui/less/rcue/font.less
index 5c12e2d3d..66976899b 100644
--- a/install/ui/less/rcue/font.less
+++ b/install/ui/less/rcue/font.less
@@ -1,139 +1,95 @@
+//
+// Font face definitions are different than original RCUE ones.
+// Here we supply only ttf variants. Additionally local variant can be
+// used so it can save some load time in some browsers.
+//
+// This approach has a disadvantage:
+// - fonts do not work in IE8 and below
+//
+// Advantage is that it nicely fits into Fedora packaging guidelines
+//
 
-/* Note:  OpenSans italic styles are not loaded by default; nor is Overpass. */
 
 @font-face {
-  font-family: 'OpenSansLight';
+  font-family: 'Open Sans';
   font-style: normal;
   font-weight: normal;
-  src: url('../font/OpenSans-Light-webfont.eot');
-  src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-Light-webfont.woff') format('woff'),
-       url('../font/OpenSans-Light-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
+  src: local('Open Sans'),
+       url('../fonts/open-sans/OpenSans-Regular.ttf') format('truetype');
 }
-/*
+
 @font-face {
-  font-family: 'OpenSansLightItalic';
-  font-style: normal;
+  font-family: 'Open Sans';
+  font-style: italic;
   font-weight: normal;
-  src: url('../font/OpenSans-LightItalic-webfont.eot');
-  src: url('../font/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-LightItalic-webfont.woff') format('woff'),
-       url('../font/OpenSans-LightItalic-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
+  src: local('Open Sans Italic'),
+       url('../fonts/open-sans/OpenSans-Italic.ttf') format('truetype');
 }
-*/
+
 @font-face {
-  font-family: 'OpenSansRegular';
+  font-family: 'Open Sans';
   font-style: normal;
-  font-weight: normal;
-  src: url('../font/OpenSans-Regular-webfont.eot');
-  src: url('../font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-Regular-webfont.woff') format('woff'),
-       url('../font/OpenSans-Regular-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+  font-weight: 300;
+  src:  local('Open Sans Light'),
+        url('../fonts/open-sans/OpenSans-Light.ttf') format('truetype');
 }
-/* 
-@font-face {
-  font-family: 'OpenSansItalic';
-  font-style: normal;
-  font-weight: normal;
-  src: url('../font/OpenSans-Italic-webfont.eot');
-  src: url('../font/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-Italic-webfont.woff') format('woff'),
-       url('../font/OpenSans-Italic-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
-}
-*/
+
 @font-face {
-  font-family: 'OpenSansSemibold';
-  font-style: normal;
-  font-weight: normal;
-  src: url('../font/OpenSans-Semibold-webfont.eot');
-  src: url('../font/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-Semibold-webfont.woff') format('woff'),
-       url('../font/OpenSans-Semibold-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Open Sans Light Italic'),
+       url('../fonts/open-sans/OpenSans-LightItalic.ttf') format('truetype');
 }
-/* 
-@font-face {
-  font-family: 'OpenSansSemiboldItalic';
-  font-style: normal;
-  font-weight: normal;
-  src: url('../font/OpenSans-SemiboldItalic-webfont.eot');
-  src: url('../font/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
-       url('../font/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
-}
-*/
+
 @font-face {
-  font-family: 'OpenSansBold';
+  font-family: 'Open Sans';
   font-style: normal;
-  font-weight: normal;
-  src: url('../font/OpenSans-Bold-webfont.eot');
-  src: url('../font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-Bold-webfont.woff') format('woff'),
-       url('../font/OpenSans-Bold-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+  font-weight: 600;
+  src: local('Open Sans Semibold'),
+       url('../fonts/open-sans/OpenSans-Semibold.ttf') format('truetype');
 }
-/* 
+
 @font-face {
-  font-family: 'OpenSansBoldItalic';
-  font-style: normal;
-  font-weight: normal;
-  src: url('../font/OpenSans-BoldItalic-webfont.eot');
-  src: url('../font/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-BoldItalic-webfont.woff') format('woff'),
-       url('../font/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Open Sans Semibold Italic'),
+       url('../fonts/open-sans/OpenSans-SemiboldItalic.ttf') format('truetype');
 }
-*/
+
 @font-face {
-  font-family: 'OpenSansExtrabold';
+  font-family: 'Open Sans';
   font-style: normal;
-  font-weight: normal;
-  src: url('../font/OpenSans-ExtraBold-webfont.eot');
-  src: url('../font/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/OpenSans-ExtraBold-webfont.woff') format('woff'),
-       url('../font/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
-       url('../font/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
+  font-weight: 700;
+  src: local('Open Sans Bold'),
+       url('../fonts/open-sans/OpenSans-Bold.ttf') format('truetype');
 }
-/* 
+
 @font-face {
-font-family: 'OpenSansExtraboldItalic';
-font-style: normal;
-font-weight: normal;
-src: url('../font/OpenSans-ExtraBoldItalic-webfont.eot');
-src: url('../font/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-     url('../font/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
-     url('../font/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
-     url('../font/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Open Sans Bold Italic'),
+       url('../fonts/open-sans/OpenSans-BoldItalic.ttf') format('truetype');
 }
 
-*/
 @font-face {
-  font-family: 'Overpass';
+  font-family: 'Open Sans';
   font-style: normal;
-  font-weight: normal;
-  src: url('../font/Overpass-Regular-webfont.eot');
-  src: url('../font/Overpass-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/Overpass-Regular-webfont.woff') format('woff'),
-       url('../font/Overpass-Regular-webfont.ttf') format('truetype'),
-       url('../font/Overpass-Regular-webfont.svg#OpenSansExtrabold') format('svg');
+  font-weight: 900;
+  src: local('Open Sans Extrabold'),
+       url('../fonts/open-sans/OpenSans-ExtraBold.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: 'Overpass';
-  font-style: normal;
-  font-weight: bold;
-  src: url('../font/Overpass-Bold-webfont.eot');
-  src: url('../font/Overpass-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../font/Overpass-Bold-webfont.woff') format('woff'),
-       url('../font/Overpass-Bold-webfont.ttf') format('truetype'),
-       url('../font/Overpass-Bold-webfont.svg#OpenSansExtrabold') format('svg');
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Open Sans Extrabold Italic'),
+       url('../fonts/open-sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
 }
 
 body {
-  font-family: OpenSansRegular, Arial, Helvetica, sans-serif;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 }
\ No newline at end of file
diff --git a/install/ui/less/rcue/forms.less b/install/ui/less/rcue/forms.less
index 8ec40e745..36be21d06 100644
--- a/install/ui/less/rcue/forms.less
+++ b/install/ui/less/rcue/forms.less
@@ -1,14 +1,18 @@
 input,
 select,
 textarea {
-  font-family: OpenSansRegular, Helvetica, Arial, sans-serif;
+  font-family: @font-family-base;
+  font-weight: normal;
+  font-style: normal;
 }
 
 label {
-  font-family: OpenSansSemiBold, Helvetica, Arial, sans-serif;
+  font-family: @font-family-base;
+  font-weight: 600;
+  font-style: normal;
 }
 
-.help-block, 
+.help-block,
 .help-inline,
 input,
 input[type="text"],
@@ -28,7 +32,7 @@ input[type="color"],
 label,
 select,
 textarea,
-.uneditable-input, 
+.uneditable-input,
 .uneditable-textarea {
   font-size: 11px;
 }
@@ -74,7 +78,7 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly],
-.uneditable-input, 
+.uneditable-input,
 .uneditable-textarea {
   background-color: #f8f8f8;
   border-color: #d4d4d4;
diff --git a/install/ui/less/rcue/navbar.less b/install/ui/less/rcue/navbar.less
index 380d0f90a..02b11376a 100644
--- a/install/ui/less/rcue/navbar.less
+++ b/install/ui/less/rcue/navbar.less
@@ -232,7 +232,9 @@
             border-bottom-color: #65696d;
             border-right: 1px solid #65696d;
             border-top-color: #64696d;
-            font-family: OpenSansSemiBold, Arial, Helvetica, sans-serif;
+            font-family: @font-family-base;
+            font-weight: 600;
+            font-style: normal;
             z-index: 0;
             &.dropdown-toggle .caret:after {
               border-top-color: #54595d;
diff --git a/install/ui/less/variables.less b/install/ui/less/variables.less
new file mode 100644
index 000000000..a86ecf707
--- /dev/null
+++ b/install/ui/less/variables.less
@@ -0,0 +1,6 @@
+// FreeIPA Less Variables
+
+// Bootstrap overrides
+@font-family-base:                  "Open Sans", Helvetica, Arial, sans-serif;
+
+// RCUE overrides
\ No newline at end of file