chore(docs): Use Phrase font CDN (#416)

* Use Phrase font CDN * Fix text font-size * prevent rapidoc from loading google fonts --------- Co-authored-by: Mladen Jablanovic <[email protected]>
phrase · Sep 28, 2023 · e61ebc3 · e61ebc3
1 parent 841ea56
commit e61ebc3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/Makefile b/Makefile
@@ -24,7 +24,7 @@ watch_scss:
 watch_ts:
 	npx tsc --watch ./doc/main.ts --outFile ./doc/main.js
 serve:
-	npx http-server doc
+	npx http-server doc -c-1 -p 8080
 docs: lint bundle
 	npx sass -s compressed ./doc/main.scss:./doc/main.css ./doc/rapidoc.scss:./doc/rapidoc.css
 	npx tsc ./doc/main.ts --outFile ./doc/main.js

diff --git a/doc/_variables.scss b/doc/_variables.scss
@@ -24,12 +24,12 @@ $colorEmphasizedBackground: #f7f7f7;
 $colorCodeBackground: #000;
 $menuHoverForeground: #000;
 
-$fontPrimary: "Source Sans Pro", Verdana, sans-serif;
+$fontPrimary: Inter, Verdana, sans-serif;
 $fontCode: Menlo, monospace;
 
 $fontSize2: 12 / 16 * 1rem;
 $fontSize3: 13 / 16 * 1rem;
-$fontSize4: 15 / 16 * 1rem;
+$fontSize4: 14 / 16 * 1rem;
 $fontSize5: 18 / 16 * 1rem;
 
 $fontWeightLight: 300;

diff --git a/doc/index.html b/doc/index.html
@@ -6,8 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="./favicon-32x32.png?v=2" rel="icon" sizes="32x32" type="image/png">
     <link href="./favicon-16x16.png?v=2" rel="icon" sizes="16x16" type="image/png">
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous">
-    <link rel="preload" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600:latin,cyrillic&display=swap" as="style">
+    <link rel="preconnect" href="https://static.phrase.com/" crossorigin="anonymous">
     <script type="text/javascript">
       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
       new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -16,7 +15,6 @@
       })(window,document,'script','dataLayer','GTM-K85N4R');
     </script>
     <script type="module" src="./rapidoc-min.js" defer></script>
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600:latin,cyrillic&display=swap" rel="stylesheet">
     <link href="./main.css" type="text/css" rel="stylesheet">
     <script src="./main.js" defer></script>
   </head>
@@ -34,7 +32,8 @@
       info-description-headings-in-navbar="true"
       text-color="#242424"
       primary-color="#333333"
-      regular-font="Source Sans Pro,Verdana,sans-serif"
+      load-fonts="false"
+      regular-font="Inter,Verdana,sans-serif"
       mono-font="Menlo,monospace"
       font-size="largest"
       nav-bg-color="#FBFBFB"

diff --git a/doc/main.scss b/doc/main.scss
@@ -10,6 +10,27 @@
   font-display: swap;
 }
 
+/* cyrillic */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://static.phrase.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2") format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://static.phrase.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+
 .nav-logo {
   display: flex;
   align-items: center;

diff --git a/doc/rapidoc.scss b/doc/rapidoc.scss
@@ -141,6 +141,10 @@ div.tag.title {
   text-transform: none;
 }
 
+.m-markdown {
+  --font-size-regular: #{$fontSize4};
+}
+
 .section-gap--read-mode {
   --font-size-regular: #{$fontSize5};
   --font-size-small: #{$fontSize4};