Fix font-families for code and button

Inherited font-family properties are overridden by the UA
stylesheet making the font-family used for these elements
potentially undefined.

Bug: 401489541
Change-Id: I6ec5b4d88728688d4f6c87fd3a06c09f11253994
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6346609
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/ui/components/buttons/button.css

@@ -43,6 +43,7 @@ button {
   cursor: inherit;
   display: inline-flex;
   position: relative;
+  font-family: var(--default-font-family);
   font-size: var(--sys-typescale-body4-size);
   font-weight: var(--ref-typeface-weight-medium);
   line-height: var(--sys-typescale-body4-line-height);

front_end/ui/components/buttons/textButton.css

@@ -8,6 +8,7 @@
   margin: 2px;
   height: 24px;
   font-size: 12px;
+  font-family: var(--default-font-family);
   border: 1px solid var(--sys-color-tonal-outline);
   border-radius: 12px;
   padding: 0 12px;

front_end/ui/components/markdown_view/markdownView.css

@@ -68,6 +68,7 @@ devtools-code-block.animating {
 
 .message code {
   color: var(--sys-color-on-surface);
+  font-family: var(--monospace-font-family);
   font-size: 11px;
   user-select: text;
   cursor: text;