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

freeipa.spec.in

@@ -154,6 +154,8 @@ Requires: policycoreutils >= %{POLICYCOREUTILSVER}
 Requires: tar
 Requires(pre): certmonger >= 0.65
 Requires(pre): 389-ds-base >= 1.3.1.3
+Requires: fontawesome-fonts
+Requires: open-sans-fonts
 
 # With FreeIPA 3.3, package freeipa-server-selinux was obsoleted as the
 # entire SELinux policy is stored in the system policy
@@ -680,11 +682,8 @@ fi
 %{_usr}/share/ipa/ui/*.ico
 %{_usr}/share/ipa/ui/*.css
 %{_usr}/share/ipa/ui/*.js
+%dir %{_usr}/share/ipa/ui/css
 %{_usr}/share/ipa/ui/css/*.css
-%{_usr}/share/ipa/ui/font/*.eot
-%{_usr}/share/ipa/ui/font/*.svg
-%{_usr}/share/ipa/ui/font/*.ttf
-%{_usr}/share/ipa/ui/font/*.woff
 %dir %{_usr}/share/ipa/ui/js
 %dir %{_usr}/share/ipa/ui/js/dojo
 %{_usr}/share/ipa/ui/js/dojo/dojo.js

install/conf/ipa.conf

@@ -1,5 +1,5 @@
 #
-# VERSION 14 - DO NOT REMOVE THIS LINE
+# VERSION 15 - DO NOT REMOVE THIS LINE
 #
 # This file may be overwritten on upgrades.
 #
@@ -22,12 +22,13 @@ LimitRequestFieldSize 100000
 AddType application/java-archive        jar
 AddType application/x-xpinstall         xpi
 
-# Proper header for .woff fonts
-AddType application/x-font-woff         woff
+# Proper header for .tff fonts
+AddType application/x-font-ttf          ttf
 
 # Enable compression
 AddOutputFilterByType DEFLATE text/html text/plain text/xml \
- application/javascript application/json text/css
+ application/javascript application/json text/css \
+ application/x-font-ttf
 
 # Disable etag http header. Doesn't work well with mod_deflate
 # https://issues.apache.org/bugzilla/show_bug.cgi?id=45023
@@ -130,6 +131,19 @@ Alias /ipa/crl "$CRL_PUBLISH_PATH"
 </Directory>
 
 
+#  List explicitly only the fonts we want to serve
+Alias /ipa/ui/fonts/open-sans "/usr/share/fonts/open-sans"
+Alias /ipa/ui/fonts/fontawesome "/usr/share/fonts/fontawesome"
+<Directory "/usr/share/fonts">
+  SetHandler None
+  AllowOverride None
+  Satisfy Any
+  Allow from all
+  ExpiresActive On
+  ExpiresDefault "access plus 1 year"
+</Directory>
+
+
 #  webUI  is now completely static, and served out of that directory
 Alias /ipa/ui "/usr/share/ipa/ui"
 <Directory "/usr/share/ipa/ui">

install/ui/ipa.css

@@ -543,7 +543,6 @@ ul#viewtype li a {
 
 
 h1 {
-    font-family: "Overpass Bold", OpenSansRegular, "Liberation Sans", Arial, sans-serif;
     font-size: 1.5em;
     color: #555555;
     text-transform: uppercase;
@@ -552,7 +551,6 @@ h1 {
 
 
 h2 {
-    font-family: "Overpass Bold", OpenSansRegular, "Liberation Sans", Arial, sans-serif;
     font-size: 1.5em;
     color: #333333;
     text-transform: uppercase;
@@ -562,7 +560,6 @@ h2 {
 }
 
 h3 {
-    font-family: "Overpass Bold", OpenSansRegular, "Liberation Sans", Arial, sans-serif;
     font-size: 1.8em;
     color: #3c3c3c;
     text-transform: uppercase;
@@ -726,7 +723,6 @@ span.main-separator{
 .action-button {
     background: none;
     background-image: none;
-    font-family: OpenSansRegular, "Liberation Sans", Arial, sans-serif;
     font-size: 0.9em;
 }
 
@@ -767,7 +763,7 @@ span.main-separator{
 .strikethrough { text-decoration: line-through; }
 
 textarea.certificate {
-    font-family: "Courier New";
+    font-family: monospace;
     width: 100%;
     height: 250px;
 }
@@ -1066,7 +1062,6 @@ body.info-page  {
 }
 
 .info-page h1, .info-page h2, .info-page h3 {
-    font-family: "Overpass", OpenSansRegular, "Liberation Sans", Arial, sans-serif;
     margin-left: 0px;
     font-weight: normal;
     color: #555555;
@@ -1170,7 +1165,6 @@ body.info-page  {
 }
 
 .hbac-test-title {
-    font-family: 'Overpass Bold', OpenSansRegular, 'Liberation Sans', Arial, Sans-Serif;
     font-size: 1.8em;
     color: #3c3c3c;
     text-transform: uppercase;

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

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

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

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

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');
-}
-/*
-@font-face {
-  font-family: 'OpenSansLightItalic';
-  font-style: normal;
-  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');
-}
-*/
-@font-face {
-  font-family: 'OpenSansRegular';
-  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-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-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-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-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-face {
-  font-family: 'OpenSansExtrabold';
-  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-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-face {
-  font-family: 'Overpass';
-  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');
+  src: local('Open Sans'),
+       url('../fonts/open-sans/OpenSans-Regular.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: 'Overpass';
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: normal;
+  src: local('Open Sans Italic'),
+       url('../fonts/open-sans/OpenSans-Italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
   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-weight: 300;
+  src:  local('Open Sans Light'),
+        url('../fonts/open-sans/OpenSans-Light.ttf') format('truetype');
+}
+
+@font-face {
+  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: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans Semibold'),
+       url('../fonts/open-sans/OpenSans-Semibold.ttf') format('truetype');
+}
+
+@font-face {
+  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: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'),
+       url('../fonts/open-sans/OpenSans-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  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: 'Open Sans';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Open Sans Extrabold'),
+       url('../fonts/open-sans/OpenSans-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+  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;
 }

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;

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;

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

install/ui/util/sync.sh

@@ -285,12 +285,6 @@ pushd $DIR/../../ #freeipa/install
         RECURSIVE=0
         EXCEPTIONS="--exclude /Makefile*"
         sync-files
-
-        SOURCE=ui/font/*
-        TARGET=$TARGET_BASE/ui/font
-        RECURSIVE=0
-        EXCEPTIONS="--exclude /Makefile*"
-        sync-files
     fi
 
     if [[ $IMAGES ]] ; then