Google font won't align with Grid

For some reason, google font won't align vertically like the text in p tag. 'align-items' doesn't work. Does this have something to do with google fonts?

<link href="https://fonts.googleapis.com/css?family=Lakki+Reddy&display=swap" rel="stylesheet">

<div class="header">
  <p class="appLogo">Math App</p>
  <p class='reg-font'>How about me</p>
</div>


.header {
  width: 100%;
  background-image: radial-gradient(#30506d, #212827);
  display: grid;
  grid-template-columns: repeat(2, 1fr);  
  justify-items: center;
  align-items: center;
}

.appLogo {
  font-family: 'Lakki Reddy', cursive;
  outline: 2px solid white;
  color: white;
  font-size: 1.5em;
}
.reg-font {
  outline: 2px solid white;
  color: white;
}