From e61ebc3116c70705bc7e8093f7fe3c4a1a8471bd Mon Sep 17 00:00:00 2001
From: theSoenke <soenke.behrendt@gmail.com>
Date: Thu, 28 Sep 2023 11:49:40 +0200
Subject: [PATCH] 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 <mladen.jablanovic@phrase.com>
---
 Makefile            |  2 +-
 doc/_variables.scss |  4 ++--
 doc/index.html      |  7 +++----
 doc/main.scss       | 21 +++++++++++++++++++++
 doc/rapidoc.scss    |  4 ++++
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/Makefile b/Makefile
index d68e59a7..13ab16d6 100644
--- 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
index 643dfebb..7458288e 100644
--- 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
index e2c13e8a..c0caf9b4 100644
--- 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
index f9ad80fb..af45ad46 100644
--- 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
index 2d774577..980dd4d8 100644
--- 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};