What's the best way to change presentation font in the Default theme?

[vedranmiletic]

I have used this code previously:

<style>
section {
 font-family: 'Roboto', 'Segoe UI', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
}
</style>

However, this code doesn't seem to work in marp-cli 1.0 with marp-core 2.0. The CSS above gets included in <style></style>, but not as the last item so it gets overridden by the defaults. Any suggestions?

[yhatt]

Now Marp team recognizes that as a regression of Marpit framework: marp-team/marpit#288

---

Workaround

:root psuedo-class selector

As a workaround, you can use :root pseudo-class selector instead of section. :root has higher CSS specificity than the original element so you can overload styles more certainly.

it may be useful to know that :root actually has a higher specificity. Pseudo-class selectors (but not pseudo-elements) have a specificity equal to that of a class, which is higher than a basic element selector.

-- https://css-tricks.com/almanac/selectors/r/root/#points-of-interest

<style>
:root {
  font-family: 'Roboto', 'Segoe UI', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
}
</style>

In general :root represents html selector, but Marp recognizes as section selector.

!important

Or you can use simply !important.

<style>
section {
  font-family: 'Roboto', 'Segoe UI', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif !important;
}
</style>

[yhatt]

This regression was fixed in the latest patch release Marp Core v2.0.1 and Marp CLI v1.0.1.

[vedranmiletic]

Thank you, that was quick!