Configurable font-family for code blocks

[powersj]

It would be really nice to be able to have a configurable option for the code font in config.toml:

font = "Montserrat"
font_code = "Ubuntu Mono"

It appears that inline code (e.g. "Run whoami at the prompt") uses code blocks around whoami. Larger blocks of code use code blocks as well, but the highlight.js class needed to be used as well. I had success with the following in my own custom.css:

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');

body code, .hljs {
    font-family: 'Ubuntu Mono', monospace;
}

Is there a better way to do this? Thoughts?

[2001db8]

I solved this and custom font weight by editing a copy of css.html in /layouts/partials/ to this:

<style>

    html body {
        font-family: '{{ .Site.Params.font }}', sans-serif;
        background-color: {{ .Site.Params.backgroundColor | default "white" }};
    }

    :root {
        --accent: {{ .Site.Params.accent | default "#2196F3" }};
        --border-width: {{ if .Site.Params.showBorder | default false }} 5px {{ else }} 0 {{ end }};
    }

</style>

<!-- main -->
<link rel="stylesheet" href="{{ "css/main.css" | absURL }}">

<!-- custom -->
{{ range .Site.Params.css }} <link rel="stylesheet" href="{{ . | absURL }}"> {{ end }}

<!-- google fonts -->
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.font }}">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.font }}{{ if .Site.Params.fontweight }}:{{ .Site.Params.fontweight }}{{ end }}">
+ {{ if .Site.Params.codefont }} <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.codefont }}"> {{ end }}

<!-- highlight.js -->
{{ if .Site.Params.highlight | default false }} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/{{ .Site.Params.highlightStyle | default "default" }}.min.css"> {{ end }}

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

+ {{ if .Site.Params.codefont }}
+ <style>
+ 
+    code, kbd, pre, samp {
+        font-family: '{{ .Site.Params.codefont }}', monospace;
+    }
+ 
+ </style>
+ {{ end }}

I can add a custom code font using i.e. codefont = "Source Code Pro" and a custom font weight using i.e. fontweight = "600" in config.toml.

[powersj]

Thanks for that!