Merge pull request #1965 from OctopusDeploy/sf/fonts-and-preloading

Fonts and font preloading
OctopusDeploy · Aug 8, 2023 · c6c731a · c6c731a
2 parents da86b7a + 928a738
commit c6c731a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/public/docs/css/main.css b/public/docs/css/main.css
@@ -111,7 +111,7 @@ em {
 h1 {
     font-size: 2.75rem;
     line-height: 1.2;
-    font-weight: 600;
+    font-weight: 800;
     color: var(--color-heading);
     font-family: var(--heading-font);
     letter-spacing: -0.02em;
@@ -124,7 +124,7 @@ h1 {
 }
 
 h2, h3, h4, h5, h6 {
-    font-weight: 600;
+    font-weight: 800;
     line-height: 1.4;
     color: var(--color-heading);
     padding: 2rem 0 0.5rem 0;

diff --git a/public/docs/css/roboto-bold.woff2 b/public/docs/css/roboto-bold.woff2
diff --git a/public/docs/css/roboto-regular.woff2 b/public/docs/css/roboto-regular.woff2
diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css
@@ -3,6 +3,22 @@
     https://toolness.github.io/accessible-color-matrix/
 */
 
+@font-face {
+    font-family: 'RobotoRegular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url("roboto-regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: 'RobotoBold';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url("roboto-bold.woff2") format("woff2");
+}
+
 @font-face {
     font-family: 'fa-solid';
     font-style: normal;
@@ -117,9 +133,8 @@
     --light-green: #00FFA3FF;
 
 
-
-    --heading-font: Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
-    --body-font: Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
+    --heading-font: RobotoBold,Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
+    --body-font: RobotoRegular,Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
     --code-font: Consolas, monaco, monospace;
 
 

diff --git a/src/config.ts b/src/config.ts
@@ -55,6 +55,8 @@ export const OPEN_GRAPH = {
 };
 
 export const HEADER_SCRIPTS = `
+<link rel="preload" href="/css/roboto-regular.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="/css/roboto-bold.woff2" as="font" type="font/woff2" crossorigin>
 <meta name="google-site-verification" content="nIbWsTU_ELqMnLNxIexH_s6ch3m-s_MaFnl5u8WoaRM" />
   <script defer>
   const whenActivated = new Promise((resolve) => {