How to change the font-family

[vegetarianinvestor]

I tried multiple ways to change the font-family but nothing worked out. Updating the _variables.scss file to change the $primary-font also didn't work. Could you please guide me?

Thanks.

[salim-b]

Besides setting $primary-font and $secondary-font in assets/scss/_variables.scss, you also need to make sure the desired font families are actually available. Currently the theme relies on external Google Fonts loaded in assets/scss/_typography.scss.

[vegetarianinvestor]

Thanks for the quick follow up. In order to try out changes I did update the primary-font and add its url to typgraphy.scss file as below. I restarted the hugo server too but I don't see any changes. What could be wrong?

Also would adding these files under dev.site/assets/scss folder work? Right now I am trying to change files under the theme folder.

Thanks.

$primary-font:'Comic Neue', sans-serif;
$secondary-font:'Volkhov', serif;
$icon-font: 'themefisher-font';

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,500,600);
@import url(https://fonts.googleapis.com/css?family=Volkhov:400italic);
@import url(https://fonts.googleapis.com/css?family=Comic Neue:400);

[salim-b]

@import url(https://fonts.googleapis.com/css?family=Comic Neue:400);

This is obviously wrong. You need to quote the URL (or HTML-escape it) since it contains a space, i.e.:

@import url("https://fonts.googleapis.com/css?family=Comic Neue:400");

What could be wrong?

You need the extended version of Hugo to be able to recompile SCSS to CSS (in case you missed that 🙂).

Also would adding these files under dev.site/assets/scss folder work? Right now I am trying to change files under the theme folder.

Yes, assets/scss/ takes precedence over themes/assets/scss/ (the same applies to every other folder). It's actually the recommended workflow to not directly overwrite files in the themes/ directory (so you would be able to easily update the theme later on).

[vegetarianinvestor]

Thanks for pointing out about the extended version of hugo. I had installed hugo on my ubuntu 20.04 machine through snap UI. I don't see a way to upgrade through it nor there seems to be a list of commands that could do it too. I will keep searching a way to upgrade to an extended version for this mandatory compilation.

[salim-b]

I don't see a way to upgrade through it nor there seems to be a list of commands that could do it too.

The extended version can be installed with the command snap install hugo --channel=extended.

But be aware that while Sass/SCSS works, the Snap package shows some serious deficiencies with Hugo modules and external binaries like Pandoc due to its strict confinement – thus manually installing the (extended) Debian package from GitHub releases seems to be the superior choice for the time being.

[vegetarianinvestor]

Great thanks for the quick response. I did uninstall hugo and reinstall it through the deb file. I can now see the font changes reflected on the local deployment. Thanks for the help.