<div class="flex">
  <div class="example rem">
    <h2>REM</h2>
    <div class="default">Default</div>
    <div class="jomhuria">Jomhuria</div>
    <div class="oswald">Oswald</div>
    <div class="oi">Oi</div>
  </div>
  <div class="example ex">
    <h2>EX & CH</h2>
    <div class="default">Default</div>
    <div class="jomhuria">Jomhuria</div>
    <div class="oswald">Oswald</div>
    <div class="oi">Oi</div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Oi&family=Oswald&family=Jomhuria&display=swap');

:root{background:#aaa;overflow:hidden}
h2{margin:0}
.flex{
  display:flex;
  flex-direction:row;
  gap:1px;
}
.example{
  flex:1 auto;
  height:100vh;
  padding:1rem;
  background:#fff;
  >div{
    display:inline-block;
    margin-block-start:1rem;
    vertical-align:middle;
    background:#06d;
    padding:.5em 1em;
    color:#fff;
    border-radius:.5rem;
  }
  &.ex>div{
    padding:1ex 1.5ch;
  }
}
.jomhuria{font-family:Jomhuria}
.oi{font-family:oi}
.oswald{font-family:oswald}
.dyslexic{font-family:'Open Dyslexic'}