CODEWITHSUNDEEP
hugo
Omortis
Omortis

Reputation: 1530

How do I override the custom font in the Hugo book theme?

So I am building a site with the hugo-book theme. The docs here (under Extra Customization) say to create scss files under ./assets, while the theme submodule itself stores its css defaults under ./theme/hugo-book/assets.

Following this logic I created an scss file at ./assets/_fonts.scss:

/* 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;
}

but hugo is still picking up the default roboto font from the theme directory. The fonts are stored under ./static/fonts and the hugo compiler seems to be picking up the changes.

Should I instead be making changes to the hugo-theme submodule and not worrying about it? That doesn't seem right. Searching the internet shows references to a custom_css params entry in config.toml but it would be pointing to ./assets - is this not the default?

Asking here before I ask the hugo-book author, in case I am missing something simple.

Upvotes: 0

Views: 1746

Answers (1)

RATHER MUNEER
RATHER MUNEER

Reputation: 36

You have to create an assets folder from the root of your theme. This assets folder should not be inside any other folder. For the fonts, create a folder by the name of static and inside of that create another one by the name of fonts and put your web fonts inside of it. For the fonts to work, paste the font stylesheet into _custom.scss partial and change the URL path there. After that these should work without any issues. Note: the static folder shouldn't be inside another folder.

  • assets

    _custom.scss

  • static/fonts

    webfonts.woff

Upvotes: 2

Related Questions