feat: custom font (#34)

* feat: custom font-family

* docs: update README.md

* docs: update README.md

7 files changed, 52 insertions, 4 deletions

diff --git a/README.md b/README.md
index 2f39bd4..9283344 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,46 @@ params:
     provider: disqus
 ```
 
+## Custom
+
+### Custom font-family
+
+We have 5 variables to custom font-family in [_variables.scss](https://github.com/WingLim/hugo-tania/blob/main/assets/sass/base/_variables.scss):
+
+```css
+:root {
+    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
+    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
+    --base-font-family: var(--sys-font-family), var(--zh-font-family);
+    --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    --article-font-family: var(--base-font-family);
+}
+```
+
+
+Create file `layouts/partials/head/custom.html` in your site root directory.
+
+```html
+<style>
+  :root {
+      --article-font-family: "Noto Serif SC", var(--base-font-family);
+  }
+</style>
+
+<!-->This script use to load font from outside<-->
+<script>
+  (function () {
+      const customFont = document.createElement('link');
+      customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";
+
+      customFont.type = "text/css";
+      customFont.rel = "stylesheet";
+
+      document.head.appendChild(customFont);
+  }());
+</script>
+```
+
 ## Layout
 
 ### Archives
diff --git a/assets/sass/base/_scaffolding.scss b/assets/sass/base/_scaffolding.scss
index 3a9240a..5323c4f 100644
--- a/assets/sass/base/_scaffolding.scss
+++ b/assets/sass/base/_scaffolding.scss
@@ -1,9 +1,7 @@
 /* Scaffolding */
 
 html {
-    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto',
-        Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI',
-        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: var(--base-font-family);
     color: var(--font-color);
     font-weight: 400;
     font-size: 1rem;
diff --git a/assets/sass/base/_variables.scss b/assets/sass/base/_variables.scss
index d2a2c85..829dcad 100644
--- a/assets/sass/base/_variables.scss
+++ b/assets/sass/base/_variables.scss
@@ -19,3 +19,11 @@
     --transparent-bg: rgba(0, 0, 0, 0.05);
     --light-transparent-bg: rgba(255, 255, 255, 0.1);
 }
+
+:root {
+    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
+    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
+    --base-font-family: var(--sys-font-family), var(--zh-font-family);
+    --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    --article-font-family: var(--base-font-family);
+}
diff --git a/assets/sass/components/_highlight.scss b/assets/sass/components/_highlight.scss
index 270299c..eecad2d 100644
--- a/assets/sass/components/_highlight.scss
+++ b/assets/sass/components/_highlight.scss
@@ -7,7 +7,7 @@ $code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono",
 
 code, pre {
     font-size: $code-font-size;
-    font-family: $code-font-family;
+    font-family: var(--code-font-family);
     background: $code-background;
 }
 
diff --git a/assets/sass/components/_post.scss b/assets/sass/components/_post.scss
index 6c29b7e..2d3db1c 100644
--- a/assets/sass/components/_post.scss
+++ b/assets/sass/components/_post.scss
@@ -73,6 +73,7 @@ header {
 
 .article-post {
     margin-bottom: 2rem;
+    font-family: var(--article-font-family);
     
     img{
         border-radius: 5px;
diff --git a/layouts/partials/head/custom.html b/layouts/partials/head/custom.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/layouts/partials/head/custom.html
diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html
index 68eca7e..7c3c570 100644
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@@ -26,4 +26,5 @@
     <link rel="shortcut icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}" />
     {{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+    {{ partial "head/custom.html" . }}
 </head>
\ No newline at end of file