US280502 woff2 update (#34)

* Updates font-face to reference woff2 and adds font-display setting
* Updates changelog & bumps version

Co-authored-by: Zack Hawkins <[email protected]>

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)
 

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": {

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

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