Example: Custom font family for article content

By default, this theme uses Latoopen in new window for article content. This example shows how to use another font instead. For example, let's change article font family to Merriweatheropen in new window.

Create layouts/partials/head/custom.html under your Hugo site folder, with following code:

<style>
		/// Overwrite CSS variable
    :root {
        --article-font-family: "Merriweather", var(--base-font-family);
    }
</style>

<script>
		(function () {
		    const customFont = document.createElement('link');
		    customFont.href = "https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap";
		
		    customFont.type = "text/css";
		    customFont.rel = "stylesheet";
		
		    document.head.appendChild(customFont);
		}());
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18