How to change the font-family
vegetarianinvestor opened this issue · comments
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.
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.
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);
@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).
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.
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.
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.