Merge pull request #85 from markdumay/develop

Configurable font

README.md

@@ -110,7 +110,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
 
 - **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
 - **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
+- **Theme style** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font.
 - **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
 - **Security policy** - The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
 

assets/scss/app.scss

@@ -1,5 +1,6 @@
 // Define template variables 
 $themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
+$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
 $carousel-control-prev-icon-bg: url("/img/carousel_prev.svg") !default;
 $carousel-control-next-icon-bg: url("/img/carousel_next.svg") !default;
 

assets/scss/common/_variables.scss

@@ -8,7 +8,7 @@ $fa-font-path:                  "../fonts";
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
-$font-family-sans-serif:        "Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;

config/_default/params.toml

@@ -46,6 +46,8 @@ schemaSection = "blog"
 [style]
     themeColor = "#D43900" #00b0f0
     themeOpacity = "10"
+    themeFont = "Inter"
+    themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"
 
 [main]
     featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk

layouts/partials/head/stylesheet.html

@@ -8,4 +8,4 @@
 {{ end -}}
     <link rel="preconnect" href="https://fonts.googleapis.com"> 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap">
+    <link rel="stylesheet" href="{{ site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@markdumay/hugo-theme-hinode",
-      "version": "0.7.6",
+      "version": "0.7.7",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {