Fix #1346 font weight issues by swapping out Google fonts for local @font-face (#1347)

starryeyez024 · github-actions[bot] · castastrophe · web-flow · commit daaa654aa64e · 2021-02-11T12:50:45.000-05:00
* Swap Google fonts reference for local font reference. Include temporary workaround to get proper font weights mapped to variations of the font family to show it working

* changelog

* Remap Display font instead of text font, reset fallback values for weights to standard values

* Update elements/pfe-styles/src/red-hat-font.scss

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* Sass doc

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -7,10 +7,12 @@
 - [9fab144](https://github.com/patternfly/patternfly-elements/commit/9fab1440da7bc26e3dd5f92224f03e964ea9eda2) feat: pfe-primary-detail
 - [57b5dd2](https://github.com/patternfly/patternfly-elements/commit/57b5dd2adf1c0fd0e00a6c9112d3ad5fb66a5a11) feat: Update Firefox support to 78 (latest version for RHEL CSB)
 - [28439ea](https://github.com/patternfly/patternfly-elements/commit/28439eadb22c34edbbed177233b0eeb2ef77024b) feat: pfe-codeblock (#804)
+
 ### Fixes
 - [03899cc](https://github.com/patternfly/patternfly-elements/commit/03899ccf7a4421186a7316926955b3a3bd1068f7) fix: Typography: mixins & extends (#1303)
 - [5d661cb](https://github.com/patternfly/patternfly-elements/commit/5d661cb7e85921ed72f324a0b635873c23bc69e9) fix: pfe-clipboard docs; add font-size 
-- [30c77d0](https://github.com/patternfly/patternfly-elements/commit/30c77d0225d235b68367097e8e462621266cab7b) fix: update font-weight on pfe text modifier classes
+- [30c77d0](https://github.com/patternfly/patternfly-elements/commit/30c77d0225d235b68367097e8e462621266cab7b) fix: Adjust font-weight on pfe text modifier classes & define custom font-face for Red Hat Text font
+
 ## 1.1.1 ( 2021-01-18 )
 
 ### Fixes
@@ -38,6 +40,7 @@
 - [0354352](https://github.com/patternfly/patternfly-elements/commit/03543523064f4a885b44bd334b0e24a77f00aee9) feat: Open a pull request from the command-line
 - [7559485](https://github.com/patternfly/patternfly-elements/commit/755948553015d8745f8faad8b7a299031ec6fff3) feat: Migrate from Travis to GitHub Actions
 - [51d055a](https://github.com/patternfly/patternfly-elements/commit/51d055ae15b3570c6d902c60d45163a0154e1011) feat: Add automerge action for pull requests when their base PR is updated
+
 ### Fixes
 - [24f1057](https://github.com/patternfly/patternfly-elements/commit/24f105789ffb01541e7892f59df0352272bab2a1) fix: updated pfe-autocomplete slotted input to use correct font (#1151)
 - [9501ebb](https://github.com/patternfly/patternfly-elements/commit/9501ebb87cfc371563c04ba155a101846fe26e20) fix: Update baseline snapshots to cover full page (#1172)
diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html
@@ -12,13 +12,13 @@
 
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
     -->
-
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
diff --git a/elements/pfe-autocomplete/demo/index.html b/elements/pfe-autocomplete/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PFElements: pfe-autocomplete Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-avatar/demo/index.html b/elements/pfe-avatar/demo/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>PFElements: pfe-avatar Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-badge/demo/index.html b/elements/pfe-badge/demo/index.html
@@ -7,7 +7,7 @@
 
   <title>PatternFly Element | pfe-badge Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-band/demo/index.html b/elements/pfe-band/demo/index.html
@@ -7,7 +7,7 @@
 
   <title>PatternFly Element: Band Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-button/demo/index.html b/elements/pfe-button/demo/index.html
@@ -12,7 +12,7 @@
 
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-card/demo/index.html b/elements/pfe-card/demo/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
     -->
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
diff --git a/elements/pfe-clipboard/demo/index.html b/elements/pfe-clipboard/demo/index.html
@@ -20,7 +20,7 @@
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="/examples/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
diff --git a/elements/pfe-collapse/demo/index.html b/elements/pfe-collapse/demo/index.html
@@ -12,7 +12,7 @@
 
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="/examples/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
@@ -9,7 +9,7 @@
   <title>PatternFly Element | pfe-content-set Demo</title>
 
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-cta/demo/index.html b/elements/pfe-cta/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
   <title>PatternFly Elements: pfe-cta demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-datetime/demo/index.html b/elements/pfe-datetime/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>PFElements: pfe-datetime Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-dropdown/demo/index.html b/elements/pfe-dropdown/demo/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <title>PatternFly Element | pfe-dropdown Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-health-index/demo/index.html b/elements/pfe-health-index/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>PFElements: pfe-health-index Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-icon-panel/demo/index.html b/elements/pfe-icon-panel/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>PFElements: pfe-icon-panel Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-icon/demo/index.html b/elements/pfe-icon/demo/index.html
@@ -7,7 +7,7 @@
 
   <title>PatternFly Element | pfe-icon Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-jump-links/demo/index.html b/elements/pfe-jump-links/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>PatternFly Element | pfe-jump-links Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-markdown/demo/index.html b/elements/pfe-markdown/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>PatternFly Element | pfe-markdown Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-modal/demo/index.html b/elements/pfe-modal/demo/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>PatternFly Element | pfe-modal Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-navigation/demo/index.html b/elements/pfe-navigation/demo/index.html
@@ -8,7 +8,7 @@
 
   <title>PatternFly Element | Navigation Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-number/demo/index.html b/elements/pfe-number/demo/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>PFElements: pfe-number Demo</title>
 
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&family=Red+Hat+Text:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
diff --git a/elements/pfe-sass/maps/_typography.scss b/elements/pfe-sass/maps/_typography.scss
@@ -12,10 +12,10 @@ $pfe-typography-base: (
   line-height:               1.5,
   
   // These font weights are specific to the Red Hat font families from Google Fonts:
-  font-weight--light:        400,
-  font-weight--normal:       500,
-  font-weight--semi-bold:    700,
-  font-weight--bold:         900,
+  font-weight--light:        300,
+  font-weight--normal:       400,
+  font-weight--semi-bold:    600,
+  font-weight--bold:         700,
 );
 
 
diff --git a/elements/pfe-sass/mixins/_components.scss b/elements/pfe-sass/mixins/_components.scss
@@ -133,7 +133,7 @@
 
   font-family: inherit;
   font-size:   pfe-local(FontSize--header, calc(#{pfe-var(font-size)} * 1.1));
-  font-weight: pfe-var(font-weight--normal);
+  font-weight: pfe-var(font-weight--bold);
   text-align:  pfe-local(TextAlign, left);
   line-height: pfe-var(line-height);
   padding:     pfe-local(Padding, $region: trigger);
diff --git a/elements/pfe-sass/mixins/_copy-mixins.scss b/elements/pfe-sass/mixins/_copy-mixins.scss
diff --git a/elements/pfe-select/demo/index.html b/elements/pfe-select/demo/index.html
diff --git a/elements/pfe-styles/demo/colors.html b/elements/pfe-styles/demo/colors.html
diff --git a/elements/pfe-styles/demo/index.html b/elements/pfe-styles/demo/index.html
diff --git a/elements/pfe-styles/package.json b/elements/pfe-styles/package.json
diff --git a/elements/pfe-styles/src/red-hat-font.scss b/elements/pfe-styles/src/red-hat-font.scss
diff --git a/elements/pfe-tabs/demo/index.html b/elements/pfe-tabs/demo/index.html
diff --git a/elements/pfe-toast/demo/index.html b/elements/pfe-toast/demo/index.html
diff --git a/elements/pfelement/demo/index.html b/elements/pfelement/demo/index.html
