Материал сденав наценку выпуска

Question

Я бэкэнд-разработчик, помогающий кому-то с веб-приложением Angular, и я столкнулся с проблемой при добавлении шрифтов нашей компании, он использует материал.

Красная часть - это блок mat-sidenav, а синяя - mat-sidenav-content, желтая часть - это некоторый запас, который внезапно становится таким большим, когда я меняю шрифты.

В devtools это выглядит так:

, поэтому где-то есть элемент element.style, устанавливающий поле, но, похоже, он не может найти его в коде.Теперь странная вещь: если я перетащил вкладку из Chrome как отдельное окно, проблема будет решена, но я не думаю, что пользователям это понравится.Любая подсказка, почему изменяется маржа и как я могу решить эту проблему навсегда?

/* VAriables */ 
:root {
  --color-accent:   black; /* Fallback */
}

.u-category-test     { --color-accent: rgba(67, 119, 64, 0.5); }
.u-category-qa       { --color-accent: rgba(153, 100, 19, 0.5); }
.u-category-prod     { --color-accent: rgba(216, 3, 3, 0.5); }

/* Nav */

  .nav-header {
    position: relative;
    padding: 2rem;
  }
  
  .nav-title {
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1;
    margin: 0;
  }
  
  .nav-title strong {
    font-weight: 600;
  }
  
  .nav-header-icon {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 1.5rem; /* magic */
    right: 1.75rem; /* magic */
  }
  
  .nav-item {
    padding: .5em 0.5em 0.5em 0;
  }
  
  .nav-icon {
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin-right: .25rem;
  }
  
  .nav-category {
    margin: .2em 0;
    padding-left: 2rem;
    font-size: 11px;
    font-weight: normal;
    text-transform: uppercase;
  }
  
  .nav-button {
    display: block;
    width: 100%;
    padding: .2rem;
    padding-left: calc(2rem + 16px + .5rem); /* padding + icon + magic */
    line-height: 2;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: inherit;
    border: none;
    background-color: transparent;
    cursor: default;
    outline: none;
  }
  .nav-button:hover,
  .nav-button:focus:not(.is-selected) {
    background-color: hsla(0,0%,0%,.1);
  }
  .nav-button.is-selected {
    background-color: var(--color-accent);
  }

  .nav-button.is-selected,
  .nav-button.is-selected em {
    color: #fff;
  }
  .nav-button.is-selected:focus {
    opacity: .8;
  }
  
  .nav-button em {
    font-style: normal;
    font-weight: 600;
    pointer-events: none; /* makes it invisible to clicks */
  }

  .nav-footer {
    margin-top: 1rem;
    padding: 2rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
  }

  .nav-footer-version {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: .75rem;
    line-height: 2;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: inherit;
    border: none;
    background-color: transparent;
    cursor: default;
    outline: none;
    text-align: center;
  }

  #button-download {
    background-color: rgba(196, 196, 196, 0.5);
  }
  #button-download:hover {
    background-color: rgba(150, 150, 150, 0.5);
  }
  .client-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #eee;
  }

  .main {
    height: 100%;
  }

<header class="nav-header">
  <h1 class="nav-title">Clients</h1>
</header>

<div class="nav-item">
  <h5 class="nav-category">
    <span class="nav-icon flag-icon flag-icon-be"></span>
    Client
  </h5>
  <button type="button" class="u-category-test nav-button" id="button-test" routerLink="test" routerLinkActive="is-selected">Dev</button>
  <button type="button" class="u-category-qa nav-button" id="button-qa" routerLink="qa" routerLinkActive="is-selected">QA</button>
  <button type="button" class="u-category-prod nav-button" id="button-prod" routerLink="prod" routerLinkActive="is-selected">Production</button>
</div>

.client-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #eee;
  }

  .main {
    height: 100%;
  }
   @font-face {
    font-family: 'Custom';
    src: url('/assets/fonts/Custom.ttf') format('truetype');
  }

  * {
    box-sizing: border-box;
  }

  html {
    height: 100%;
    font-family: 'Custom', 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden; /* Prevents rubber-band scrolling of the whole "page" */
    color: var(--color);
    background-color: #fff; /* To cover OSes with no default background color */
  }

  body {
    margin: 0;
    height: 100%;
    display: flex;
  }
  
  h1,
  h2,
  h3 {
    margin-top: 0;
    line-height: 1.5;
  }
  
  h1 {
    font-family: 'Custom';
    font-size: 48px;
    font-weight: normal;
  }
  
  h2 {
    font-family: 'Custom';
    font-weight: normal;
    letter-spacing: -1px;
    font-size: 16px;
  }
  
  h3, h4 {
    font-family: 'Custom';
    font-weight: normal;
    font-size: 16px;
    text-transform: uppercase;
  }
  
  h5{
    font-family: 'Custom';
    font-weight: normal;
    font-size: 30px;
  }

  table {
    width: 100%;
    border-spacing: 0;
    border: 1px solid hsla(0,0%,0%,.08);
    border-width: 0 1px 1px 0;
  }
  th {
    background-color: hsla(0,0%,50%,.06);
  }
  th,
  td {
    text-align: center;
    border: 1px solid hsla(0,0%,0%,.08);
    border-width: 1px 0 0 1px;
  }
  
  div.main{
    padding: 30px;
    button{
      font-family: 'Custom';
      margin: 10px;
    }
    button:hover{
      background-color: transparent;
      color:black;
    }
  }

<mat-sidenav-container class="client-container">
  <mat-sidenav mode="side" opened><app-side-nav></app-side-nav></mat-sidenav>
  <mat-sidenav-content>
    <div class="main mat-app-background">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>