I stopped losing Bluetooth devices in Home Assistant after flashing two ESP32 boards with ESPHome

Home Assistant's stock cards, while functional, lack control over typography, number display, and battery level indicators. Custom cards are necessary for these features, and this post covers four such cards: card-mod (CSS injection), Mushroom (compact tile cards), mini-graph-card (line charts), and button-card (JavaScript rendering).

The setup was reproducible without HACS, with custom card bundles placed under www/cards and loaded from configuration.yaml. Fonts are crucial for readability, and a theme cannot declare fonts directly. Instead, a tiny ES module enforces the typography by appending @font-face rules to the document head. This approach allows using Archivo for labels and IBM Plex Mono for values.

The Mushroom template cards are used for values, with primary and secondary text, icons, and icon colors. Card-mod enforces the typography for these cards, ensuring consistent styling across eleven template cards in the dashboard. The battery status is displayed as an SVG ring, showing charge level and switching colors at 60% and 25%. The custom field in button-card handles the computation based on the sensor state.