asurcodes / amperage

Blazing fast SEO optimized GoHugo theme with native AMP, structured data, search, service workers and i18n out of the box! :zap:

Home Page:https://themes.gohugo.io/amperage/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not able to overwrite css.

ketanip opened this issue Β· comments

Hello, I'm new to this Hugo game and static sites altogether and I tried all I can do but I am not able to change css. I followed instructions by you but I am unable to change it πŸ˜”. I just wanted to change font-family to verdena or roboto, What should I do, please help .

  • Go to themes/amperage/assets/theme.scss

  • Edit line 7 with your desired font something like
    font-family: Verdana,sans-serif;

  • If you want Roboto, you need to copy Google Fonts code for roboto into themes/amperage/layouts/partials/head/base.html and then you can use that font in the above code.

Hope that helps :)

It is still not changing.

commented

Hello @ketanip, you can extend the Amperage theme on your own project and override the styles by creating a assets/custom.scss file. You don't need to modify any theme files as stated on the README.

For you just go to Google Fonts and generate the font weights and styles of your linking, like this one and paste the content on your custom.scss file.

Then just apply on that very same file the font on the selectors you want it on:

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

REMEMBER: This may have performance considerations. I would consider using Verdana, it's included in all major browsers/OSs, so you can avoid extra downloads and you can also skip the Google Fonts step and use it directly in your selector.