Simplify working with custom fonts

[tnglemongrass]

As a user, it would be nice to define a custom font with a simple css change.

Background

driver.js already sets a global font:

.driver-popover * {
  font-family: "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif;
}

and also has the concept of attaching a custom theming class (styling popover docs):

const driverObj = driver({
  popoverClass: 'driverjs-theme'
});

But it does not apply, as many components override the font to sans-serif in the specific classes, in the font: property, e.g.:

.driver-popover-title {
  font: 19px / normal sans-serif;
  ...
}

Current behavior

The user has to redefine the font-familiy in all these places:

.driver-popover * { ... }
.driver-popover-title { ... }
.driver-popover-description { ... }
.driver-popover-footer button { ... }

Either by setting font-family: <MyCustomFont> or something like font-family: unset.

Expected behavior

One of the following approaches is possible:

1. The user can set a different font in a single place:

.driver-popover * { font-family: <MyCustomFont> }

2. Define the font-family through a theming class:

.driverjs-theme { font-family: <MyCustomFont> }

3. There might be a css class to set the custom font:

.driverjs-theme { --driver-js-font-family: <MyCustomFont> }

4. It might even inherit the global custom font set via:

html, body { font-family: <MyCustomFont> }