Hugo-coder: [v2] Different and customizables fonts for text and titles

[luizdepra]

Hugo Coder should use two different fonts. One for headers, titles and menus, other for text.
This change aims text readability, something that was criticized more than one once.

Also, is interesting if these fonts can be configured. We should support web and self-hosted fonts.

[luizdepra]

After #77, it is possible to customize the fonts, but it is not easy.
This feature will stay in second plan by now.

[luizdepra]

I'm still looking for a way to configure fonts between CDNed webfonts and self-hosted ones.

[josephting]

It is possible to do something like this to overwrite the font-family.

In assets/scss/coder.scss

$text-font-family: {{ .Site.Params.textFontFamily | default "Merriweather, Georgia, serif" }};
$heading-font-family: {{ .Site.Params.headingFontFamily | default "Lato, Helvetica, sans-serif" }};
$code-font-family: {{ .Site.Params.codeFontFamily | default "'Source Code Pro', 'Lucida Console', monospace" }};

Sadly, it's not currently possible to execute _variables.scss as template and then inject it into coder.scss.

As with the custom @font-face users want to include, I suppose it's ok to use custom_css? Probably a good idea to disable the default webfonts link tag though.

[luizdepra]

It is possible to just edit the _variables.scss to add change fonts. Asset Pipeline is here to help us. I think it is better, simpler and cleaner if we avoid creating new configuration parameters for this kind of problem.

About the @font-face, sure the user can add a custom_css, but he can also edit the _variable.scss in this case too.

I don't know. It is hard to find a good solution for this problem.

[luizdepra]

Closing.
I'm happy with our current fonts.

[andywhite37]

Hi @luizdepra - thanks for making this theme!

So just to confirm, the recommended way of customizing the fonts right now would be to fork the theme and customize _variable.scss, then just merge your upstream updates into our fork going forward?

[luizdepra]

No, you can also override the SCSS directly in your site.
I did something like this in a old version of my site: https://github.com/luizdepra/luizdepra.com/blob/5aacaf70c082c8f3ce8c79ab767e8d857f710346/assets/scss/_variables.scss
You must use the same path and filename.

But be aware that you'll need to build your site using hugo-extended binary.

[andywhite37]

Ah, ok, that makes sense. Thanks - I'm new to Hugo, so I'm still learning how all the theming and overrides work.