diff --git a/CHANGELOG.md b/CHANGELOG.md index 50414ba8..26d7d3ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## 3.0.0 (2021-01-15) +Tag: [3.0.0](https://github.com/RedHatOfficial/RedHatFont/commits/3.0.0) + +- Update CSS to reference woff2 files +- Remove the unused `text-rendering` property from font-face +- Add `font-display` property to font-face for better performance on slow connections +- Drop support for older browsers (IE8) + ## 2.3.2 (2019-07-28) Tag: [2.3.2](https://github.com/RedHatOfficial/RedHatFont/commits/2.3.2) diff --git a/package-lock.json b/package-lock.json index bc4c8fbf..9348766e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { "name": "@redhat/redhat-font", - "version": "2.2.0", + "version": "3.0.0", "lockfileVersion": 1 } diff --git a/package.json b/package.json index 7e05fa5a..e3beecab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@redhat/redhat-font", - "version": "2.2.0", + "version": "3.0.0", "description": "Red Hat - the open source font for Red Hat", "main": "red-hat-font.css", "scripts": { diff --git a/webfonts/_red-hat-font.scss b/webfonts/_red-hat-font.scss index d589edad..a7cb1d51 100644 --- a/webfonts/_red-hat-font.scss +++ b/webfonts/_red-hat-font.scss @@ -9,25 +9,30 @@ $style: "normal", $relative: true ) { - + $filePath: "./" + $familyName + "/" + $familyName + "-" + $weightName; - + @if $relative == false { $filePath: $fontLocation + "/" + $familyName + "/" + $familyName + "-" + $weightName; } - + + // Using woff & woff2 gives us the following browser support: + // Chrome 5+ + // Safari 5.1+ + // Firefox 3.6+ + // Opera 11.50+ + // IE 9+ + // Android 4.4+ + // iOS 5.1+ @font-face { font-family: $familyName; - src: - url('#{$filePath}.eot'); /* IE9 Compat Modes */ - src: - url('#{$filePath}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('#{$filePath}.woff') format('woff'); /* Modern Browsers */ - //url('#{$filePath}.otf') format('OpenType'), /* Safari, Android, iOS */ - //url('#{$filePath}.svg#RedHatDisplay-#{$weightName}') format('svg'); /* Legacy iOS */ + src: + url('#{$filePath}.woff2') format('woff2'), + url('#{$filePath}.woff') format('woff'); font-style: #{$style}; font-weight: $weightValue; - text-rendering: optimizeLegibility; + // https://calendar.perfplanet.com/2020/a-font-display-setting-for-slow-connections/ + font-display: fallback; } } @@ -36,20 +41,20 @@ //---------------------- // No compiler? No problem! Paste this file into sassmeister.com - -// If you would like to load the font from static.redhat.com, use this variable -// $fontLocation: "/"; + +// If you would like to load the font from static.redhat.com, use this variable +// $fontLocation: "/"; // and set the $relative argument to false when you call the mixin - + +//---------------------- +// Include the Red Hat Display font //---------------------- -// Include the Red Hat Display font -//---------------------- -// @include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay"); +// @include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay"); // @include printRedHatFont(400, "Medium", $familyName: "RedHatDisplay"); // @include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay"); //---------------------- -// Include the Red Hat Text font +// Include the Red Hat Text font //---------------------- // @include printRedHatFont(400, "Regular", $familyName: "RedHatText"); // @include printRedHatFont(700, "Medium", $familyName: "RedHatText"); diff --git a/webfonts/red-hat-font.css b/webfonts/red-hat-font.css index 49c63cc9..6f44538b 100644 --- a/webfonts/red-hat-font.css +++ b/webfonts/red-hat-font.css @@ -1,54 +1,44 @@ @font-face { font-family: "RedHatDisplay"; - src: url("./RedHatDisplay/RedHatDisplay-Regular.eot"); - /* IE9 Compat Modes */ - src: url("./RedHatDisplay/RedHatDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("./RedHatDisplay/RedHatDisplay-Regular.woff") format("woff"); - /* Modern Browsers */ + src: url("./RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), + url("./RedHatDisplay/RedHatDisplay-Regular.woff") format("woff"); font-style: normal; font-weight: 300; - text-rendering: optimizeLegibility; + font-display: fallback; } @font-face { font-family: "RedHatDisplay"; - src: url("./RedHatDisplay/RedHatDisplay-Medium.eot"); - /* IE9 Compat Modes */ - src: url("./RedHatDisplay/RedHatDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("./RedHatDisplay/RedHatDisplay-Medium.woff") format("woff"); - /* Modern Browsers */ + src: url("./RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), + url("./RedHatDisplay/RedHatDisplay-Medium.woff") format("woff"); font-style: normal; font-weight: 400; - text-rendering: optimizeLegibility; + font-display: fallback; } @font-face { font-family: "RedHatDisplay"; - src: url("./RedHatDisplay/RedHatDisplay-Bold.eot"); - /* IE9 Compat Modes */ - src: url("./RedHatDisplay/RedHatDisplay-Bold.eot?#iefix") format("embedded-opentype"), url("./RedHatDisplay/RedHatDisplay-Bold.woff") format("woff"); - /* Modern Browsers */ + src: url("./RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), + url("./RedHatDisplay/RedHatDisplay-Bold.woff") format("woff"); font-style: normal; font-weight: 700; - text-rendering: optimizeLegibility; + font-display: fallback; } @font-face { font-family: "RedHatText"; - src: url("./RedHatText/RedHatText-Regular.eot"); - /* IE9 Compat Modes */ - src: url("./RedHatText/RedHatText-Regular.eot?#iefix") format("embedded-opentype"), url("./RedHatText/RedHatText-Regular.woff") format("woff"); - /* Modern Browsers */ + src: url("./RedHatText/RedHatText-Regular.woff2") format("woff2"), + url("./RedHatText/RedHatText-Regular.woff") format("woff"); font-style: normal; font-weight: 400; - text-rendering: optimizeLegibility; + font-display: fallback; } @font-face { font-family: "RedHatText"; - src: url("./RedHatText/RedHatText-Medium.eot"); - /* IE9 Compat Modes */ - src: url("./RedHatText/RedHatText-Medium.eot?#iefix") format("embedded-opentype"), url("./RedHatText/RedHatText-Medium.woff") format("woff"); - /* Modern Browsers */ + src: url("./RedHatText/RedHatText-Medium.woff2") format("woff2"), + url("./RedHatText/RedHatText-Medium.woff") format("woff"); font-style: normal; font-weight: 700; - text-rendering: optimizeLegibility; + font-display: fallback; }