How to change fonts in the Primer theme?

[nelvintan]

How do you change the fonts in the primer theme? I've tried to follow the instructions, i.e., to create an assets/css/style.scss file and add:

---
---

@import "{{ site.theme }}";
body {
  font-family: "Times New Roman", Times, serif;
}

However, I don't see any changes in the font used on my github page. What am I doing wrong? Or is there a simpler way to do this? Thanks,

[seshrs]

You're changing the styles in the right place, but your styles are overridden by those set by the theme itself because of CSS Specificity rules.

You can debug CSS rules in most browser developer tools. For instance, I set up an example page and applied your stylesheet changes. I opened Chrome's developer tools and inspected the heading:

We'll need to match or exceed the specificity levels from the theme. Hence, the following CSS would work:

.markdown-body {
  font-family: 'Times New Roman', Times, serif;
}

Alternatively, you could use !important to override specificity rules, but it's a bit of a sledgehammer — it's usually a good idea not to overuse it.

body {
  font-family: 'Times New Roman', Times, serif !important;
}

[nelvintan]

Works now, thanks!