search

themefisher / airspace-hugo

Airspace Hugo theme for multipurpose use, like Portfolio, Blog, Business.
https://gethugothemes.com/products/airspace/?utm_source=airspace_github&utm_medium=referral&utm_campaign=github_theme_about
MIT License
354 stars 509 forks source link

How to change the font-family #162

Closed vegetarianinvestor closed 3 years ago

vegetarianinvestor commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 :slightly_smiling_face:).

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.