What is the preferred way to change the default font in the hugo-book theme

Using Themes
1

So, I created a website using the hugo-book theme and it works well and looks great! The problem is, I can only seem to change the font (following the docs here) by changing the assets and static directories under project/themes/hugo-book. No changes in project/assets or project/static seem to have any effect.

Am I missing something simple? Making changes under hugo-book effects the git status. I can ignore it, etc, etc, but it doesn’t seem right. What few answers I can find involve messing with the template lookup order and I got into hugo to get away from coding in my spare time so trying not to dig too deep…

Is the general idea with hugo-book to make changes in the original submodule directory and ignore the git status?

2

This works fine for me:

assets/_fonts.scss

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

body {
  font-family: "Montserrat", sans-serif;
}

code {
  font-family: monospace;
}

If you continue to have problems, please share your repository.

4

That works very well, thanks! Notably you are @importing the font remotely while I have been trying to load the font from local files with the code below. I think I like your approach better…

/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/merriweather-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/merriweather-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/merriweather-v28-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/merriweather-v28-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
  font-family: 'Merriweather', sans-serif;
}

code {
  font-family: 'Roboto Mono', monospace;
}
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.