Fix popover icon fonts and expose font-family variable

Author: nilbuild

docs/src/content/guides/changelog.mdx

@@ -15,9 +15,23 @@ ships, these entries move under a versioned heading.
 - `index` on the options passed to every hook, holding the currently active
   step index (same value as `driverObj.getActiveIndex()`).
   ([#490](https://github.com/nilbuild/driver.js/issues/490))
+- `--driver-popover-font-family` CSS variable to set the popover font in one
+  place, without overriding each text element individually.
+  ([#607](https://github.com/nilbuild/driver.js/issues/607))
+
+### Changed
+
+- The popover title and description now render in the default font stack
+  (`"Helvetica Neue", …`) instead of the browser's default `sans-serif`. An
+  internal rule had been shadowing the intended font. Set
+  `--driver-popover-font-family` to use your own.
 
 ### Fixed
 
+- Icon fonts (Material Icons, Font Awesome, etc.) placed inside a step
+  description are no longer overridden by the popover font and render correctly.
+  ([#510](https://github.com/nilbuild/driver.js/issues/510),
+  [#512](https://github.com/nilbuild/driver.js/issues/512))
 - Each `driver()` call keeps its own config, steps and state, so creating a
   second instance no longer overwrites the first.
   ([#571](https://github.com/nilbuild/driver.js/issues/571))

docs/src/content/guides/theming.mdx

@@ -75,6 +75,22 @@ Here is the list of classes applied to the popover which you can use in conjunct
 
 Visit the [example page](/docs/styling-popover) for an example that modifies the popover styles.
 
+## Custom Font
+
+The popover text uses the following font stack by default:
+
+```css
+"Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif;
+```
+
+To use your own font, override the `--driver-popover-font-family` CSS variable. It's inherited, so you can set it anywhere above the popover (on `:root`, `body`, or a `popoverClass`) and it applies to the title, description, buttons, and progress text at once.
+
+```css
+:root {
+  --driver-popover-font-family: "Inter", sans-serif;
+}
+```
+
 ## Modifying Popover DOM
 
 Alternatively, you can also use the `onPopoverRender` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.

src/driver.css

@@ -38,6 +38,16 @@
 /* Popover styles */
 .driver-popover {
   all: unset;
+  font-family: var(
+    --driver-popover-font-family,
+    "Helvetica Neue",
+    Inter,
+    ui-sans-serif,
+    "Apple Color Emoji",
+    Helvetica,
+    Arial,
+    sans-serif
+  );
   box-sizing: border-box;
   color: #2d2d2d;
   margin: 0;
@@ -53,12 +63,8 @@
   background-color: #fff;
 }
 
-.driver-popover * {
-  font-family: "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif;
-}
-
 .driver-popover-title {
-  font: 19px / normal sans-serif;
+  font-size: 19px;
   font-weight: 700;
   display: block;
   position: relative;
@@ -95,7 +101,7 @@
 
 .driver-popover-description {
   margin-bottom: 0;
-  font: 14px / normal sans-serif;
+  font-size: 14px;
   line-height: 1.5;
   font-weight: 400;
   zoom: 1;
@@ -125,7 +131,7 @@
   text-decoration: none;
   background-color: #ffffff;
   color: #2d2d2d;
-  font: 12px / normal sans-serif;
+  font-size: 12px;
   cursor: pointer;
   outline: 0;
   zoom: 1;