How to use specific font with highlight.js

Question

Updated with the proper link to the example

I am using a Hugo theme that comes with bundled with CSS and uses Highlight.JS for syntax highlighting. The web pages I have created show a plain "courier" based fixed width font in the code blocks see here for example of my site page

I would like to use another font, like sans-mono or something more neat looking, like it shows on Highlight.JS web page here

I'm not super familiar with Javascript and CSS, just trying to use them. Is there an easier way to tell Highlight.JS to use specific font? Assuming I have font files available.

Thanks ZeeKay

Befoul

You gave a link to your localhost... it's unreachable obviously. – Varicelloid

Thanks for catching it. I updated with a relevant link. – Befoul

Answer 1

Add this to your CSS:

pre > code {
    font-family: "Sans Mono", "Consolas", "Courier", monospace;
}

This will use the first font in that list that is available on the user’s system. Sometimes fonts have different spacing that their real names, so for example if "Sans Mono" doesn’t work, try "SansMono". Make sure to put monospace last so that at least some suitable font is chosen if the user doesn’t have any of the listed fonts.

If this doesn’t work, maybe it’s due to a selector specificity problem, where the default styles provided by highlight.js are overriding your own styles. Something that will help avoid this is putting the <link> that loads your CSS file after the one to load the highlight.js CSS file. If this doesn’t work, you will have to make the pre > code selector more specific, such as changing it to #main pre > code if all page content is wrapped in an element with the ID main.

If you’re not sure how to add CSS, the easiest way is to put it in the HTML template surrounded by <style></style> tags. Though it’s better to put it in a CSS file and reference it with <link rel="stylesheet" href="myStyles.css">.

Aiguillette

Thank you @rory-okane for the tip. I ended up changing the font line to: font-family: "Monaco", "Consolas", "Ubuntu Mono", "Courier New", monospace; instead to display a better mono font. But this begs the question that this line is loading the font installed locally on my computer, not the web-fonts I have bundled with my site. How do I force the usage of web-fonts here? This is important as I need it to be consistent across platforms. Thanks again! – Befoul

@ZeeKay After you load a web-font on a site, it becomes referenceable in font-family by the name specified in the web-font. Check the documentation from where you got the web-font – you can often reference the font with the obvious name "Sans Mono", but some sources require calling the font something like "Sans+Mono" or "SansMono_400" instead. You should still specify locally-available fallback fonts later in the list – they will be used while the web-font is loading. – Szymanowski