From 3e0ae972685aefa20ec619b17a7c2b7f7c2f50d9 Mon Sep 17 00:00:00 2001 From: Petr Vobornik Date: Wed, 4 Dec 2013 16:15:20 +0100 Subject: 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 | 7 +- install/conf/ipa.conf | 22 +++- install/ui/ipa.css | 8 +- install/ui/less/font-awesome/path.less | 7 +- install/ui/less/font-awesome/variables.less | 2 +- install/ui/less/rcue.less | 1 + install/ui/less/rcue/buttons.less | 6 +- install/ui/less/rcue/font.less | 166 ++++++++++------------------ install/ui/less/rcue/forms.less | 14 ++- install/ui/less/rcue/navbar.less | 4 +- install/ui/less/variables.less | 6 + install/ui/util/sync.sh | 6 - 12 files changed, 108 insertions(+), 141 deletions(-) create mode 100644 install/ui/less/variables.less diff --git a/freeipa.spec.in b/freeipa.spec.in index 9e55d440..03e53611 100644 --- a/freeipa.spec.in +++ b/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 diff --git a/install/conf/ipa.conf b/install/conf/ipa.conf index f185f514..f4dac982 100644 --- a/install/conf/ipa.conf +++ b/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" +# 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" + + SetHandler None + AllowOverride None + Satisfy Any + Allow from all + ExpiresActive On + ExpiresDefault "access plus 1 year" + + + # webUI is now completely static, and served out of that directory Alias /ipa/ui "/usr/share/ipa/ui" diff --git a/install/ui/ipa.css b/install/ui/ipa.css index 293da08b..ceae393c 100644 --- a/install/ui/ipa.css +++ b/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; diff --git a/install/ui/less/font-awesome/path.less b/install/ui/less/font-awesome/path.less index c5a69124..7d7395d4 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 1a65fe2d..ee2d2bdb 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 a1637688..ffd22120 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 8110a7fb..dd7b04be 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 5c12e2d3..66976899 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 8ec40e74..36be21d0 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 380d0f90..02b11376 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 00000000..a86ecf70 --- /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 diff --git a/install/ui/util/sync.sh b/install/ui/util/sync.sh index 6d03278b..2fde91d9 100755 --- a/install/ui/util/sync.sh +++ b/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 -- cgit