feat: add Roboto font support to Material style

README.md

@@ -280,7 +280,7 @@ import '@pnotify/core/dist/BrightTheme.css';
 
 ## Material
 
-The Material style. Supports dark mode. Requires [material-design-icons](https://www.npmjs.com/package/material-design-icons). Include the CSS file in your page:
+The Material style. Supports dark mode. Requires [material-design-icons](https://www.npmjs.com/package/material-design-icons) and optionally the Roboto font. Include the CSS file in your page:
 
 ```html
 <link href="node_modules/@pnotify/core/dist/Material.css" rel="stylesheet" type="text/css" />
@@ -340,6 +340,16 @@ Or a clone from jsDelivr:
 
 ```
 
+### Roboto Font
+
+The Material style uses the "400" and "500" weights of Roboto. It will fall back to "sans-serif".
+
+You can use the Google Font CDN:
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" />
+```
+
 ## Bootstrap
 
 ```sh

index.html

@@ -95,6 +95,13 @@
       crossorigin="anonymous"
     />
 
+    <!-- Roboto Font -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+      crossorigin="anonymous"
+    />
+
     <!-- JavaScript Source Formatting -->
     <link
       rel="stylesheet"

packages/core/Material.css

@@ -1,6 +1,7 @@
 /*
 Color Scheme: https://www.google.com/design/spec/style/color.html#color-color-palette
 Requires stylesheet to work: https://fonts.googleapis.com/css?family=Material+Icons
+And optionally: https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap
 */
 [data-pnotify].material-elem,
 [data-pnotify].material-elem.pnotify-mode-light {
@@ -59,15 +60,21 @@ Requires stylesheet to work: https://fonts.googleapis.com/css?family=Material+Ic
   padding: 24px;
 }
 [data-pnotify] .material-title {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
   font-size: 20px;
+  letter-spacing: 0.15px;
   margin-bottom: 20px;
   line-height: 24px;
 }
 [data-pnotify] .material-title:last-child {
   margin-bottom: 0;
 }
 [data-pnotify] .material-text {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
   font-size: 16px;
+  letter-spacing: 0.5px;
   line-height: 24px;
 }
 [data-pnotify].pnotify-with-icon .material-content {
@@ -182,11 +189,14 @@ Requires stylesheet to work: https://fonts.googleapis.com/css?family=Material+Ic
 
   transition: background-color 0.3s;
 
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: 1.25px;
   text-transform: uppercase;
   height: 36px;
   margin: 6px;
   min-width: 64px;
-  font-weight: bold;
 }
 [data-pnotify] .material-btn.material-btn-primary {
   color: var(--primary-button-text-color);