Font selection in theme

Using Themes
8

I have since refined my solution to incorporate ideas I have encountered on this forum:

(a) CSS styling via variables should preferably not reside in a Hugo partial template, but rather should be handled with a CSS pre-processor. This allows fine-grained font control via add-on stylesheets.

(b) The loading of the Google Fonts may still be accomplished via a Hugo partial template.

Here is what I ended up doing:

  1. config.toml has a variable called googlefonts set so:

googlefonts = "//fonts.googleapis.com/css?family=Merriweather|Fira+Mono|Droid+Sans"

  1. /layouts/partials/header_custom.html has this invocation:

     {{ if .Site.Params.googlefonts }}
 <link rel="stylesheet" href="{{ .Site.Params.googlefonts }}" type="text/css" media="all" /> 
 {{ end }}

  2. /static/css/custom_style.css has lines like these:

     p {
   font-family: "Merriweather", serif;
 }
 code {
   font-family: "Fira Mono";
 }

This is admittedly a little more cumbersome to maintain when a font change is desired, but is, I believe, in keeping with a cleaner layout as envisaged by the designers.

Thanks to @alexandros here.