TL;DR
I want to set up a Jekyll webpage (al-folio template) with two languages in which
- my Latin text renders as
Robotofont, - my Arabic scripts renders as with the Google font I added (
Noto Naskh Arabic), and - my code blocks be rendered with
monospacefont.
But I can only do two of the three above simultaneously. Help needed.
Context
I'm a newbie in HTML, Jekyll, sass, and all that. So I used al-folio template to build my personal site. It is important for me to write on it in both English and my right-to-left mother-tongue language (Persian with Arabic scripts). Aesthetically, the default Arabic font my browser renders is not pleasing. So I added a nicer Google font to my _sass/_base.scss:
font-family: 'Noto Naskh Arabic', serif;
Since the line above originally doesn't exist in the theme adding it also overwrites my English font. So, I resorted to including the correct Latin font name to the same line:
font-family: 'Roboto', 'Noto Naskh Arabic', serif;
Now, everything looks fantastic except my code block's font. Originally, its font was monospace, and I want them to stay that way. Unfortunately, I cannot fix the last bit. Seemingly, this multilingual need of mine messes up some theme settings in a way that either one or more of these requirements breaks. I specifically tried to enforce the default code block font by adding
font-family: monospace;
to this, this, and this lines, but had no luck. Seemingly, other elements' settings (particularly the highlight class) overwrite the font.
Any solution or workaround is appreciated very much!
