From cb1400d28f74c9673cb8319c42bbfb2d0b19ef3a Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 18 Feb 2021 18:42:48 +0200
Subject: [PATCH] fix(docs-infra): ensure the main font is applied to inputs
 (#40881)

It turns out that `<input>` and `<button>` elements do not inherit the
`font-family` style from `<body>` by default, but rather use a
user-agent defined style. This means that their font-family might be
different than the one used in the rest of the page.

This commit fixes it by ensuring `<input>` (and other) elements inherit
their `font-family` style from their parent element.

Before: ![inputs font before][1]
After: ![inputs font after][2]

(The difference in font is subtle, but it's there.)

[1]: https://user-images.githubusercontent.com/8604205/107853245-76bae980-6e1d-11eb-8318-e5f6e13876cc.png
[2]: https://user-images.githubusercontent.com/8604205/107853246-77538000-6e1d-11eb-86f2-e3e7e41158f5.png

PR Close #40881
---
 aio/src/styles/0-base/_typography.scss | 1 +
 aio/src/styles/1-layouts/_sidenav.scss | 1 -
 aio/src/styles/2-modules/_buttons.scss | 4 ++++
 3 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 1b0afc1f466..e9503a7cd2b 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -100,6 +100,7 @@ input,
 a {
   @include font-size(16);
   @include line-height(32);
+  font-family: inherit;
   font-weight: 400;
   color: $darkgray;
 
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index a5ccd7fcb82..1ecf57666a2 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -63,7 +63,6 @@ aio-nav-menu {
       color: $darkgray;
       cursor: pointer;
       display: flex;
-      font-family: $main-font;
       align-items: center;
       justify-content: space-between;
       overflow-wrap: break-word;
diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss
index 644972f6565..80701be2a32 100644
--- a/aio/src/styles/2-modules/_buttons.scss
+++ b/aio/src/styles/2-modules/_buttons.scss
@@ -1,5 +1,9 @@
 /* Button Styles */
 
+button {
+  font-family: inherit;
+}
+
 .button,
 a.button.mat-button {
   display: inline-block;
