chore: compare fonts in /examples/fonts page

scss/_variables.scss

@@ -711,7 +711,7 @@ $aspect-ratios: (
 
 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      HelvNeueOrange#{"/*rtl:insert:Arabic*/"}, "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
 $font-family-base:            var(--#{$prefix}font-sans-serif) !default;

site/content/docs/5.3/examples/fonts/fonts.css

@@ -0,0 +1,160 @@
+.roboto {
+  font-family: 'Roboto', sans-serif !important;
+}
+
+.helvetica {
+  font-family: Helvetica !important;
+}
+
+.helvetica-neue {
+  font-family: "Helvetica Neue" !important;
+}
+
+.helvetica-neue-orange {
+  font-family: HelvNeueOrange !important;
+}
+
+.arial {
+  font-family: Arial !important;
+}
+
+.san-francisco {
+  font-family: 'SF Pro Display' !important;
+}
+
+.fw-400 {
+  font-weight: 400;
+}
+
+.fw-700 {
+  font-weight: 700;
+}
+
+.fs-14px {
+  font-size: 14px;
+}
+
+.fs-16px {
+  font-size: 16px;
+}
+
+.fs-18px {
+  font-size: 18px;
+}
+
+.fs-20px {
+  font-size: 20px;
+}
+
+.fs-24px {
+  font-size: 24px;
+}
+
+.fs-30px {
+  font-size: 30px;
+}
+
+.fs-34px {
+  font-size: 34px;
+}
+
+.fs-40px {
+  font-size: 40px;
+}
+
+.fs-50px {
+  font-size: 50px;
+}
+
+.lh-20px {
+  line-height: 20px;
+}
+
+.lh-26px {
+  line-height: 26px;
+}
+
+.lh-30px {
+  line-height: 30px;
+}
+
+.lh-40px {
+  line-height: 40px;
+}
+
+.lh-50px {
+  line-height: 50px;
+}
+
+.lh-1 {
+  line-height: 1;
+}
+
+.lh-107 {
+  line-height: 1.07;
+}
+
+.lh-108 {
+  line-height: 1.08;
+}
+
+.lh-111 {
+  line-height: 1.11;
+}
+
+.lh-114 {
+  line-height: 1.14;
+}
+
+.lh-150 {
+  line-height: 1.5;
+}
+
+.letter-spacing-n1 {
+  letter-spacing: -1px;
+}
+
+.letter-spacing-n1-4 {
+  letter-spacing: -1.4px;
+}
+
+.letter-spacing-n1-6 {
+  letter-spacing: -1.6px;
+}
+
+.letter-spacing-n0-8 {
+  letter-spacing: -.8px;
+}
+
+.letter-spacing-n0-4 {
+  letter-spacing: -.4px;
+}
+
+.letter-spacing-n0-2 {
+  letter-spacing: -.2px;
+}
+
+.letter-spacing-n0-25 {
+  letter-spacing: -.25px;
+}
+
+.letter-spacing-n0-5 {
+  letter-spacing: -.5px;
+}
+
+.letter-spacing-n0-1 {
+  letter-spacing: -.1px;
+}
+
+.bg-light-gray {
+  background-color: rgba(256, 0, 0, .4);
+}
+
+.bg-none {
+  background-color: none;
+}
+
+.w-500 {
+  width: 500px;
+  max-width: 500px;
+}