Font selection in theme

[chandra]

@Leo_Merkel

Hope this helps: https://stoned.io/web-development/hugo/How-To-Dynamically-Use-Google-Fonts-In-A-Hugo-Website/. It’s not depending on any theme - just include it in your theme of choice.

I use this technique in my basis template for all projects and it works like a charm. Just enter the name of the google font in config.toml and you’re all set.

Thank you @Leo_Merkel. I found your idea very appealing as it is generic and works across themes.

However, I found a difficulty with the suggestion from the link given because the + in the Google font name for multi-barrelled font names was being translated as %2b when the partial was rendered. This caused a 404 error and the chosen fonts were not being rendered.

I then came across this workaround by @pauby and tried it.

It works, and the + to space issue is circumvented as well.

FWIW, I giving below the MWE (minimal working example) in case it helps others:

1. In config.toml I have these lines:

    googlefonts = ["Droid Sans", "Fira Mono"]
    fontbody = 'Droid Sans'
    fontcode = 'Fira Mono'
   

2. In layouts/partials/head_custom.html, I have these lines:

    {{ range .Site.Params.googlefonts }}
          <link rel="stylesheet" {{ printf "href=\"//fonts.googleapis.com/css?family=%s\"" . | safeHTMLAttr }} type="text/css" media="all" />
        {{ end }}
   
    <style>
    body {
        font-family: '{{ .Site.Params.fontbody }}';
    }
    code {
       font-family: '{{ .Site.Params.fontcode }}'; 
    }
    </style>
   

If there is a more elegant or compact way to achieve this, please advise me.

Thank you.