Material sidenav margin issue - css

Question

I'm a backend developer helping someone with an Angular webapplication and I ran into an issue when adding the fonts of our company, he uses material.
The red part is a mat-sidenav block and the blue is mat-sidenav-content the yellow part is some margin that suddenly is that big when I changed the fonts.
In devtools it looks like this:
so there is somewhere an element.style setting the margin but can't seem to find it in the code. Now the strange thing is if I dragged the tab out of chrome as a seperate window the issue is resolved but I don't think users will like doing that. Any clue why the margin changes and how I can resolve this permanently?
/* 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>

Answer 1

What helped me was applying position: unset to mat-sidenav-container. This element by default has position: relative.
Interestingly I had this problem only with multiple sidenavs.
<mat-sidenav-container>
<mat-sidenav mode="side" position="start" opened>
<desktop-main-navigation></desktop-main-navigation>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
<mat-sidenav mode="over" position="end">
Notifications
</mat-sidenav>
</mat-sidenav-container>
Your specific issue and fact it happened when adding fonts might has been explained here:
https://stackoverflow.com/a/56219106/2804285