Font selection in theme

Using Themes
7

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.

1 Like