diff --git a/frontend/packages/dev-console/src/components/import/section/FormSection.scss b/frontend/packages/dev-console/src/components/import/section/FormSection.scss
index 7bf210a37fe..d15b99425e0 100644
--- a/frontend/packages/dev-console/src/components/import/section/FormSection.scss
+++ b/frontend/packages/dev-console/src/components/import/section/FormSection.scss
@@ -1,7 +1,3 @@
-.odc-form-section {
-  &__heading {
-    font-size: var(--pf-global--FontSize--xl);
-    font-weight: var(--pf-global--FontWeight--semi-bold);
-    margin: 0px;
-  }
+.odc-form-section__heading {
+  margin: 0;
 }
diff --git a/frontend/packages/dev-console/src/components/pipelineruns/PipelineTaskLogs.scss b/frontend/packages/dev-console/src/components/pipelineruns/PipelineTaskLogs.scss
index 774416de326..7e7ae54cec8 100644
--- a/frontend/packages/dev-console/src/components/pipelineruns/PipelineTaskLogs.scss
+++ b/frontend/packages/dev-console/src/components/pipelineruns/PipelineTaskLogs.scss
@@ -18,7 +18,7 @@
   &__stepname {
     background-color: #030303;
     color: var(--pf-global--BackgroundColor--100);
-    font-weight: 900;
+    font-weight: var(--pf-global--FontWeight--bold);
     text-transform: uppercase;
     margin: 0px;
     padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md) var(--pf-global--spacer--sm)
diff --git a/frontend/public/components/RBAC/_rbac.scss b/frontend/public/components/RBAC/_rbac.scss
index 71f0dc92e25..d52c0af63de 100644
--- a/frontend/public/components/RBAC/_rbac.scss
+++ b/frontend/public/components/RBAC/_rbac.scss
@@ -36,14 +36,12 @@
   }
   .help-text {
     color: $color-text-secondary;
-    font-weight: 400;
     position: relative;
     top: -3px;
     left: 20px;
   }
   .checkbox-label {
     margin-bottom: 5px;
-    font-weight: 400;
   }
 
   .rbac-minor {
diff --git a/frontend/public/components/_edit-yaml.scss b/frontend/public/components/_edit-yaml.scss
index e626e057312..f37940fee0f 100644
--- a/frontend/public/components/_edit-yaml.scss
+++ b/frontend/public/components/_edit-yaml.scss
@@ -29,8 +29,6 @@
 }
 
 .yaml-editor__header-text {
-  font-size: 20px;
-  font-weight: 300;
   margin: 0;
 }
 
diff --git a/frontend/public/components/_global-notification.scss b/frontend/public/components/_global-notification.scss
index 815e32c7873..60f507f2fce 100644
--- a/frontend/public/components/_global-notification.scss
+++ b/frontend/public/components/_global-notification.scss
@@ -30,10 +30,10 @@ $global-notification-text: $color-pf-white;
 }
 
 .co-global-notification__impersonate-name {
-  font-weight: 700;
+  font-weight: var(--pf-global--FontWeight--bold);
 }
 
 .co-global-notification__impersonate-kind {
-  font-weight: 600;
+  font-weight: var(--pf-global--FontWeight--bold);
   padding-right: 20px;
 }
diff --git a/frontend/public/components/_quota.scss b/frontend/public/components/_quota.scss
index 593a1c3a814..d511aad719a 100644
--- a/frontend/public/components/_quota.scss
+++ b/frontend/public/components/_quota.scss
@@ -6,7 +6,6 @@
 
 .co-resource-quota-dashboard-scopes {
   font-size: $font-size-h5;
-  font-weight: 300;
 }
 
 .co-resource-quota-gauge-chart {
@@ -19,9 +18,4 @@
 
 .co-resource-quota-scope__description {
   font-size: $font-size-small;
-  font-weight: 300;
-}
-
-.co-resource-quota-scope__label {
-  font-weight: 500;
 }
diff --git a/frontend/public/components/_resource.scss b/frontend/public/components/_resource.scss
index a60334e7a17..74857faa0e1 100644
--- a/frontend/public/components/_resource.scss
+++ b/frontend/public/components/_resource.scss
@@ -4,16 +4,15 @@
   color: #fff;
   display: inline-block;
   flex-shrink: 0;
-  font-size: $font-size-base - 1;
-  font-weight: 300;
+  font-size: $font-size-base;
   line-height: 16px;
   margin-right: 4px;
   min-width: 18px;
-  padding: 2px 4px 1px;
+  padding: 1px 4px;
   text-align: center;
   &--lg {
-    font-size: ($font-size-base + 1);
-    line-height: 21px;
+    font-size: ($font-size-base + 3);
+    line-height: 20px;
     margin-right: 7px;
     min-width: 24px;
     padding: 0 7px;
@@ -24,7 +23,7 @@
   display: flex;
   justify-content: center;
   text-align: center;
-  width: 43px;
+  width: 50px;
 }
 
 .co-m-resource-clusterrole,
@@ -126,7 +125,7 @@
     animation: co-resource-icon__deleting 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) alternate infinite;
     flex: 0 0 auto;
     font-size: ($font-size-base - 1);
-    font-weight: 600;
+    font-weight: var(--pf-global--FontWeight--bold);
     margin: 0 0 0 15px;
     overflow: hidden;
     padding: 0 0 2px;
diff --git a/frontend/public/components/_row-filter.scss b/frontend/public/components/_row-filter.scss
index 6408816e007..8acaf3bd6a4 100644
--- a/frontend/public/components/_row-filter.scss
+++ b/frontend/public/components/_row-filter.scss
@@ -10,7 +10,7 @@ $color-row-filter-border--active: $color-pf-blue-300;
 }
 
 .co-m-row-filter__items {
-  font-weight: bold;
+  font-weight: var(--pf-global--FontWeight--bold);
   padding: 7px 10px;
   white-space: nowrap;
 }
diff --git a/frontend/public/components/catalog/_catalog.scss b/frontend/public/components/catalog/_catalog.scss
index 36ffdd354d5..cb2a170085a 100644
--- a/frontend/public/components/catalog/_catalog.scss
+++ b/frontend/public/components/catalog/_catalog.scss
@@ -7,16 +7,11 @@ $co-modal-ignore-warning-icon-width: 30px;
   @include co-break-word;
 }
 
-// reset font size back to 13px since console h5 font size is 15px
+// reset font size back to 13px since console h5 font size is 14px
 .catalog-item-header-pf-subtitle {
   font-size: 13px;
 }
 
-// reset font size back to 24px since console h1 font size is 26px
-.catalog-item-header-pf-title {
-  font-size: 24px;
-}
-
 .catalog-tile-pf-body .catalog-tile-pf-subtitle {
   font-size: ($font-size-base - 1);
 }
@@ -39,7 +34,7 @@ $co-modal-ignore-warning-icon-width: 30px;
   }
 
   &__kind-label {
-    font-weight: 600;
+    font-weight: var(--pf-global--FontWeight--bold);
   }
 
   &__name {
@@ -126,7 +121,6 @@ $co-modal-ignore-warning-icon-width: 30px;
 
   &__heading {
     font-size: 16px;
-    font-weight: 400;
     margin: 0 0 20px;
   }
 
@@ -136,7 +130,7 @@ $co-modal-ignore-warning-icon-width: 30px;
   }
 
   &__num-items {
-    font-weight: 700;
+    font-weight: var(--pf-global--FontWeight--bold);
     padding: 0 0 20px;
   }
 
@@ -186,7 +180,6 @@ $co-modal-ignore-warning-icon-width: 30px;
 }
 
 .co-catalog-tab__empty {
-  font-weight: lighter;
   color: $color-pf-black-600;
 }
 
diff --git a/frontend/public/components/dashboard/capacity-card/capacity-card.scss b/frontend/public/components/dashboard/capacity-card/capacity-card.scss
index b856fbebba5..47e54cad57b 100644
--- a/frontend/public/components/dashboard/capacity-card/capacity-card.scss
+++ b/frontend/public/components/dashboard/capacity-card/capacity-card.scss
@@ -18,7 +18,6 @@
 }
 
 .co-capacity-card__item-description {
-  font-weight: normal;
   line-height: 1.5;
   margin-bottom: 0;
 }
@@ -28,5 +27,6 @@
 }
 
 .co-capacity-card__item-title {
+  font-family: $headings-font-family;
   margin-top: 0;
 }
diff --git a/frontend/public/components/monitoring/_monitoring.scss b/frontend/public/components/monitoring/_monitoring.scss
index b6b5ebb9972..3875a32ed61 100644
--- a/frontend/public/components/monitoring/_monitoring.scss
+++ b/frontend/public/components/monitoring/_monitoring.scss
@@ -37,7 +37,6 @@
 .query-browser__expand-icon {
   color: $color-pf-black-600;
   font-size: 30px;
-  font-weight: 600;
   vertical-align: middle;
 }
 
@@ -197,7 +196,7 @@ $tooltip-background-color: #151515;
 }
 
 .query-browser__tooltip-label-key {
-  font-weight: 600;
+  font-weight: var(--pf-global--FontWeight--bold);
   text-transform: uppercase;
 }
 
@@ -207,7 +206,7 @@ $tooltip-background-color: #151515;
 };
 
 .query-browser__tooltip-value {
-  font-weight: 600;
+  font-weight: var(--pf-global--FontWeight--bold);
 }
 
 .query-browser__wrapper {
diff --git a/frontend/public/components/operator-lifecycle-manager/_operator-lifecycle-manager.scss b/frontend/public/components/operator-lifecycle-manager/_operator-lifecycle-manager.scss
index afce9081bc7..4338dd7c160 100644
--- a/frontend/public/components/operator-lifecycle-manager/_operator-lifecycle-manager.scss
+++ b/frontend/public/components/operator-lifecycle-manager/_operator-lifecycle-manager.scss
@@ -45,7 +45,7 @@
 
 .co-clusterserviceversion-empty__state__namespace {
   font-style: italic;
-  font-weight: bold;
+  font-weight: var(--pf-global--FontWeight--bold);
 }
 
 .co-crd-card-row {
@@ -127,8 +127,6 @@
 }
 
 .co-create-operand__header-text {
-  font-size: 20px;
-  font-weight: 300;
   margin: 0;
 }
 
diff --git a/frontend/public/components/operator-lifecycle-manager/markdown-view.tsx b/frontend/public/components/operator-lifecycle-manager/markdown-view.tsx
index 47264a4eed5..eaa3ff3129a 100644
--- a/frontend/public/components/operator-lifecycle-manager/markdown-view.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/markdown-view.tsx
@@ -75,7 +75,7 @@ export class SyncMarkdownView extends React.Component<{content: string, styles?:
       }
       ${this.props.styles ? this.props.styles : ''}
       </style>
-      <body><div style="overflow-y: auto;">${markdownConvert(this.props.content || 'Not available')}</div></body>`;
+      <body class="pf-m-redhat-font"><div style="overflow-y: auto;">${markdownConvert(this.props.content || 'Not available')}</div></body>`;
     return <iframe sandbox="allow-popups allow-same-origin" srcDoc={contents} style={{border: '0px', display: 'block', width: '100%', height: '0'}} ref={(r) => this.frame = r} onLoad={() => this.updateDimensions()} />;
   }
 }
diff --git a/frontend/public/components/sidebars/_resource-sidebar.scss b/frontend/public/components/sidebars/_resource-sidebar.scss
index 563676c0080..01b287c359e 100644
--- a/frontend/public/components/sidebars/_resource-sidebar.scss
+++ b/frontend/public/components/sidebars/_resource-sidebar.scss
@@ -15,19 +15,19 @@
   }
 }
 
-.co-resource-sidebar-item__header {
-  font-weight: 600;
-}
-
 .co-resource-sidebar-item__details {
   margin: 0;
   padding: 25px 0;
 }
 
+.co-resource-sidebar-item__header {
+  font-size: ($font-size-base + 2);
+}
+
 .co-resource-sidebar-item__img {
   padding: 20px 0;
 }
 
 .co-role-sidebar-subheader {
-  font-weight: normal;
+  font-weight: var(--pf-global--FontWeight--normal);
 }
diff --git a/frontend/public/components/utils/_alerts.scss b/frontend/public/components/utils/_alerts.scss
index 275d80d93d3..09dc1705fda 100644
--- a/frontend/public/components/utils/_alerts.scss
+++ b/frontend/public/components/utils/_alerts.scss
@@ -3,6 +3,7 @@
   text-align: left;
   // overrides Bootstrap-related line-height issue that causes the title and icon to go out of alignment
   h4 {
+    font-family: $font-family-base;
     line-height: var(--pf-global--LineHeight--md);
   }
 }
diff --git a/frontend/public/components/utils/_file-input.scss b/frontend/public/components/utils/_file-input.scss
index 467fdbfd7ca..9bcf463b3d3 100644
--- a/frontend/public/components/utils/_file-input.scss
+++ b/frontend/public/components/utils/_file-input.scss
@@ -46,7 +46,7 @@
 
 .co-file-dropzone__drop-text {
   font-size: 20px;
-  font-weight: bolder;
+  font-weight: var(--pf-global--FontWeight--bold);
   left: 50%;
   margin-right: -50%;
   position: absolute;
diff --git a/frontend/public/index.html b/frontend/public/index.html
index abd2b6d21fa..0981ed6f694 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -56,7 +56,7 @@
     </script>
   </head>
 
-  <body>
+  <body class="pf-m-redhat-font">
     <noscript>JavaScript must be enabled.</noscript>
     <div id="modal-container"></div>
     [[ if .GoogleTagManagerID ]]
diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
index 070e47a1930..392a7032a4d 100644
--- a/frontend/public/style/_common.scss
+++ b/frontend/public/style/_common.scss
@@ -89,7 +89,6 @@ $co-external-link-padding-right: 15px;
 
 .co-m-pane__heading {
   display: flex;
-  font-size: 22px;
   justify-content: space-between;
   margin: 0 0 $grid-gutter-width;
   &--baseline {
@@ -106,7 +105,6 @@ $co-external-link-padding-right: 15px;
 
 .co-m-pane__heading-link {
   font-size: $font-size-base;
-  font-weight: normal;
 }
 
 .co-inline-block {
@@ -114,7 +112,7 @@ $co-external-link-padding-right: 15px;
 }
 
 .co-no-bold {
-  font-weight: normal;
+  font-weight: var(--pf-global--FontWeight--normal);
 }
 
 .cos-error-title {
@@ -123,7 +121,6 @@ $co-external-link-padding-right: 15px;
 
 .co-section-heading {
   display: flex;
-  font-size: 20px;
   justify-content: space-between;
   margin: 0 0 20px 0;
 }
@@ -139,13 +136,11 @@ $co-external-link-padding-right: 15px;
 
 .co-section-heading-secondary {
   font-size: 16px;
-  font-weight: 600;
   margin: 30px 0;
 }
 
 .co-section-heading-tertiary {
   font-size: 16px;
-  font-weight: 600;
   margin: 15px 0;
 }
 
@@ -376,7 +371,7 @@ $co-external-link-padding-right: 15px;
 
 .co-legend {
   border-bottom: 0;
-  font-weight: 600;
+  font-weight: var(--pf-global--FontWeight--bold);
   font-size: $font-size-base;
   margin-bottom: 5px;
 
diff --git a/frontend/public/style/_layout.scss b/frontend/public/style/_layout.scss
index 6438dfcbf4b..a89497ffe10 100644
--- a/frontend/public/style/_layout.scss
+++ b/frontend/public/style/_layout.scss
@@ -48,7 +48,7 @@ body,
   }
 
   &__sidebar-heading {
-    font-size: 18px;
+    font-size: 17px;
     margin-bottom: 20px;
     margin-top: 45px;
   }
diff --git a/frontend/public/style/_overrides.scss b/frontend/public/style/_overrides.scss
index eb314ad3503..479942685a7 100644
--- a/frontend/public/style/_overrides.scss
+++ b/frontend/public/style/_overrides.scss
@@ -65,6 +65,19 @@ kbd {
 
 // PatternFly 4 overrides
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  // reset headings font family back to correct value
+  // bug caused by PF4 _shield-inheritable.scss
+  .pf-l-split {
+    font-family: $headings-font-family;
+  }
+}
+
 .pf-c-about-modal-box {
   &__brand {
     align-items: flex-start; // so logos don't stretch vertically
@@ -98,6 +111,7 @@ kbd {
     padding-top: 0 !important;
   }
   &__group-title {
+    font-family: $font-family-base;
     padding-top: 8px !important;
   }
 }
diff --git a/frontend/public/style/_vars.scss b/frontend/public/style/_vars.scss
index 0bfd12757c3..d7a4d947dd5 100644
--- a/frontend/public/style/_vars.scss
+++ b/frontend/public/style/_vars.scss
@@ -20,8 +20,18 @@ $fa-font-path: $consoleWebDistPath + '/';
 $font-family-base: var(--pf-global--FontFamily--sans-serif);
 // Patternfly 3 defaults to 12px, which is too small in many cases.
 $font-size-base: 14px;
+// Use PatternFly 4 heading font sizes in Patternfly 3.
+$font-size-h1: var(--pf-global--FontSize--2xl);
+$font-size-h2: 20px; // must be literal value because of calculation in patternfly/dist/sass/patternfly/_list-view.scss
+$font-size-h3: var(--pf-global--FontSize--lg);
+$font-size-h4: var(--pf-global--FontSize--md);
+$font-size-h5: var(--pf-global--FontSize--md);
+$font-size-h6: var(--pf-global--FontSize--md);
 // Patternfly 3 defaults to 40px, which leaves a lot more whitespace than we're used to.
 $grid-gutter-width: 30px;
+// Use PatternFly 4 headings font styles in PatternFly 3.
+$headings-font-family: var(--pf-global--FontFamily--heading--sans-serif);
+$headings-font-weight: var(--pf-global--FontWeight--normal);
 $kbd-bg: transparent;
 $kbd-color: $color-pf-black-600;
 // Match Patternfly 4 link colors
@@ -35,6 +45,7 @@ $popover-max-width: 325px;
 $table-border-color: $color-pf-black-200;
 
 :root {
+  --pf-chart-global--FontFamily: $font-family-base; // so charts get the correct font-family
   --pf-global--FontSize--md: $font-size-base;
   --pf-global--FontSize--sm: 13px;
 }
diff --git a/frontend/public/vendor.scss b/frontend/public/vendor.scss
index 8f8c3a30031..cffbd482a6e 100644
--- a/frontend/public/vendor.scss
+++ b/frontend/public/vendor.scss
@@ -31,7 +31,6 @@
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns"; // required by @patternfly/react-console
 @import "~patternfly/dist/sass/patternfly/mixins";  // Including this file breaks sourcemaps
-@import '~patternfly/dist/sass/patternfly/type';
 @import '~patternfly/dist/sass/patternfly/buttons';
 @import '~patternfly/dist/sass/patternfly/dropdowns'; // required by @patternfly/react-console
 @import '~patternfly/dist/sass/patternfly/breadcrumbs';