Customize the sample markdown buttons' typography

See: https://github.com/material-components/material-web/blob/main/docs/theming/typography.md#tokens

I have no idea how this works, yet.

_config.yml

@@ -42,6 +42,7 @@ minimal_mistakes_skin: "air"
 
 head_scripts:
   - /assets/js/material.rollup.js # Generated by `npm run build:js`
+  - https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap
 
 # For customizing minimal-mistakes theme features in this file, see:
 # https://mmistakes.github.io/minimal-mistakes/docs/configuration/

assets/css/main.scss

@@ -12,4 +12,12 @@
 
 /*--- custom style resets ---*/
 @import "reset";
-/*--- end custom style resets ---*/
+/*--- end custom style resets ---*/
+
+/*--- material web customizations --- */
+:root {
+  --md-ref-typeface-brand: Roboto;
+  --md-ref-typeface-plain: system-ui;
+}
+/*--- end material web customizations --- */
+

assets/js/_material.js

@@ -1,3 +1,2 @@
 import '@material/web/button/filled-button.js';
 import '@material/web/button/outlined-button.js';
-import '@material/web/checkbox/checkbox.js';

collections/jekyll/_drafts/using-material-design-components.md

@@ -5,10 +5,5 @@ tag: node.js
 tag: web component
 ---
 
-<label>
-  Material 3
-  <md-checkbox checked></md-checkbox>
-</label>
-
 <md-outlined-button>Back</md-outlined-button>
 <md-filled-button>Next</md-filled-button>