Disable Justfont and replace it with additional Google web fonts

Author: whyjz

decorate.bash

@@ -6,12 +6,13 @@
 #### 4. Insert Language menu in the left navigation bar, under the search box (matched with ^<\/form>). (for displaying and switching language options)
 #### 5. Replace the title of the book with different language, and replace `zzz_replace_token` (just a placeholder) with correct language name.  
 #### by Whyjay Zheng
-#### created on 2016/1/12, last updated on 2022/07/26
+#### created on 2016/1/12, last updated on 2022/07/28
+#### - Temporarily disabled Justfont settings; use Google Font (Noto Sans) instead
 
 html_files=$(ls docs/_build/html/*.html   docs/_build/html/main/*.html   docs/_build/html/en/*.html   docs/_build/html/en/main/*.html)
 
 google_fonts=$(cat docs/_addons/google_fonts.txt)
-jf_string=$(cat docs/_addons/jf_code.txt)
+# jf_string=$(cat docs/_addons/jf_code.txt)
 disqus_string=$(cat docs/_addons/disqus_code.txt)
 localemenu=$(cat docs/_addons/localemenu.txt)
 
@@ -27,15 +28,15 @@ google_fonts=${google_fonts//\^/\\\^}     # changes all "^" to "\^"
 google_fonts=${google_fonts//\//\\\/}     # changes all "/" to "\/"
 google_fonts=${google_fonts//\"/\\\"}     # changes all '"' to '\"'
 
-jf_string=${jf_string//\\/\\\\}     # changes all "\" to "\\"
-jf_string=${jf_string//\[/\\\[}     # changes all "[" to "\["
-jf_string=${jf_string//\]/\\\]}     # changes all "]" to "\]"
-jf_string=${jf_string//\$/\\\$}     # changes all "$" to "\$"
-jf_string=${jf_string//\./\\\.}     # changes all "." to "\."
-jf_string=${jf_string//\*/\\\*}     # changes all "*" to "\*"
-jf_string=${jf_string//\^/\\\^}     # changes all "^" to "\^"
-jf_string=${jf_string//\//\\\/}     # changes all "/" to "\/"
-jf_string=${jf_string//\"/\\\"}     # changes all '"' to '\"'
+# jf_string=${jf_string//\\/\\\\}     # changes all "\" to "\\"
+# jf_string=${jf_string//\[/\\\[}     # changes all "[" to "\["
+# jf_string=${jf_string//\]/\\\]}     # changes all "]" to "\]"
+# jf_string=${jf_string//\$/\\\$}     # changes all "$" to "\$"
+# jf_string=${jf_string//\./\\\.}     # changes all "." to "\."
+# jf_string=${jf_string//\*/\\\*}     # changes all "*" to "\*"
+# jf_string=${jf_string//\^/\\\^}     # changes all "^" to "\^"
+# jf_string=${jf_string//\//\\\/}     # changes all "/" to "\/"
+# jf_string=${jf_string//\"/\\\"}     # changes all '"' to '\"'
 
 disqus_string=${disqus_string//\\/\\\\}     # changes all "\" to "\\"
 disqus_string=${disqus_string//\[/\\\[}     # changes all "[" to "\["
@@ -70,14 +71,14 @@ do
         # insert a new line before the pygments.css line
         sed -i "/pygments.css/i\ $google_fonts" $html_f
     fi
-    # ==== Attaching jf code ====
-    if grep -q 'jf.push' $html_f; then
-        echo skip ${html_f##*/} - already attached the jf code
-    else
-        echo ----- Attaching jf code to ${html_f##*/} ...
-        # insert a new line after </head> tag
-        sed -i "/<\/head>/a\ $jf_string" $html_f
-    fi
+    # # ==== Attaching jf code ====
+    # if grep -q 'jf.push' $html_f; then
+    #     echo skip ${html_f##*/} - already attached the jf code
+    # else
+    #     echo ----- Attaching jf code to ${html_f##*/} ...
+    #     # insert a new line after </head> tag
+    #     sed -i "/<\/head>/a\ $jf_string" $html_f
+    # fi
     # ==== Attaching disqus code ====
     if grep -q 'disqus_thread' $html_f; then
         echo skip ${html_f##*/} - already attached the disqus code

docs/_addons/google_fonts.txt

@@ -1 +1 @@
-<link href='https://fonts.googleapis.com/css?family=Varela Round' rel='stylesheet'>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+TC:wght@300;400;500;700&family=Quicksand:wght@300;400;500;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Varela+Round&display=swap" rel="stylesheet">

docs/_static/style.css

@@ -1,20 +1,24 @@
 /*========================================================*/
 /* Justfont settings (webfont for Chinese characters) */
+/* Temporarily disabled. */
 /*========================================================*/
-.jf-loading body { /*載入中不顯示*/
+/*載入中不顯示*/
+/* .jf-loading body { 
       opacity: 0;
       visibility: hidden;
-}
-.jf-active body { /*如果處理成功，直接顯示*/
+} */
+
+/*如果處理成功，直接顯示*/
+/* .jf-active body { 
       opacity: 1;
       visibility: visible;
-}
-.jf-inactive body {/*如果處理失敗，直接顯示*/
+} */
+
+/*如果處理失敗，直接顯示*/
+/* .jf-inactive body {
       opacity: 1;
       visibility: visible;
-}
-
-
+} */
 
 /*========================================================*/
 /* Disable right sidebar (TOC) -- for now, let's keet ip */
@@ -32,11 +36,17 @@
     /* sidebar 字體的百分比由 --sbt-font-size-small-1 和 --sbt-font-size-small-1 定義  */
     --pst-sidebar-font-size: 1em;     /* 左側章節字體大小 1 * 87.5 = 0.875 em (14px) */
     --pst-sidebar-caption-font-size: 1.143em;    /* 左側章節群組標題字體大小 1.143 * 87.5% = 1 em (16px) */
-    /* 加入 Varela Round (from Google Fonts) */
-    --pst-font-family-base-system: Varela Round, -apple-system, Segoe UI, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    /* 加入 Quicksand & Noto Sans TC (from Google Fonts); skip Varela Round for now */
+    --pst-font-family-base-system: Quicksand, "Noto Sans TC", -apple-system, Segoe UI, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    /* 加入 Ubuntu Mono & Noto Sans TC (from Google Fonts); skip Anonymous Pro for now */
+    --pst-font-family-monospace-system: Ubuntu Mono, "SFMono-Regular", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace, "Noto Sans TC";
     --sbt-prevnext-font-size: var(--sbt-font-size-regular);   /* make prevnext font bigger (14px) */
 }
 
+/* Set up generic font weight */
+body {
+    font-weight: 300
+}
 
 /*========================================================*/
 /* Left navigation bar settings */