How can I set different fonts for code / main article?

[ddoddii]

Hello, @nunocoracao I've been looking at the discussions to make some change in my hugo blog. Is there any way I can set the fonts for main article and font for code snippets ?
I've tried putting this in the custom.css file, and the font in static/fonts/font.ttf but this changes the whole font, including the code snippet font. How can I set different fonts for article / code ?

@font-face {
    font-family: font;
    src: url('/fonts/font.ttf');
}

html {
    font-family: font;
}

By the way, the theme you made is really great 👍 It's the best hugo theme I saw so far !

[nunocoracao]

Hello @ddoddii , thanks.
There is no quick way to pull this off and it's very unlikely that any theme will support it. In order to achieve that you will need to override the theme - check Hugo docs - and hack the css for each individual article with specific fonts. Also you can try and leverage tailwind for it.

[ddoddii]

Thank you for the reply ! 😊
I managed to set different fonts tweaking custom.css like below. I leave an example in case anybody else has the same question.

@font-face {
  font-family: "SUIT";
  src: url('/fonts/SUIT-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


article {
  font-family: "SUIT", sans-serif;
  font-weight: 400;
  font-size: 13pt;
}

code {
  font-family: "Meslo LG M", monospace;
  font-size: 13pt;
}

[m27387]

Thank you for the tip.