Custom Header / Footer #
There are two empty files reserved for custom HTML in the theme, useful for adding custom scripts or stylesheets:
layouts/partials/head/custom.html
layouts/partials/footer/custom.html
To overwrite them:
- Create
layout/partials/footer/custom.html
under your Hugo site folder - Insert custom code in that file.
Example: Custom font family for article content #
By default, this theme uses Lato for article content. This example shows how to use another font instead. For example, let's change article font family to Merriweather.
Create layouts/partials/head/custom.html
under your Hugo site folder, with following code:
html
<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18