feat: Use the font Inter Display for help center articles (#9239)

Use Inter Display for help center

app/javascript/portal/application.scss

@@ -7,14 +7,15 @@
 @import 'widget/assets/scss/buttons';
 @import 'widget/assets/scss/mixins';
 @import 'widget/assets/scss/forms';
-@import 'shared/assets/fonts/inter';
+@import 'shared/assets/fonts/InterDisplay/inter-display';
 
 html,
 body {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  font-family: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   height: 100%;
+  letter-spacing: 0.2px;
 }
 
 

app/javascript/portal/components/TableOfContents.vue

@@ -12,7 +12,7 @@
             class="leading-6 border-l-2 relative -left-0.5 border-solid"
             :class="elementBorderStyles(element)"
           >
-            <p class="py-2 px-4" :class="getClassName(element)">
+            <p class="py-1 px-3" :class="getClassName(element)">
               <a
                 :href="`#${element.slug}`"
                 data-turbolinks="false"
@@ -76,7 +76,7 @@ export default {
         if (!this.h1Count && !this.h2Count) {
           return '';
         }
-        return 'ml-8';
+        return 'ml-5';
       }
 
       return '';

app/javascript/shared/assets/fonts/InterDisplay/inter-display.scss

@@ -0,0 +1,71 @@
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-ExtraLight.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~shared/assets/fonts/InterDisplay/InterDisplay-Black.woff2') format('woff2');
+}