Google字体无法与Grid对齐

Question

由于某种原因，Google字体不会像p标签中的文本那样垂直对齐。 'align-items'不起作用。这与Google字体有关吗？

.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;
}

<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>