<h1>
  Blog Post
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat quaerat impedit eos iure nisi quia at magni, est fugit laborum ullam illum ducimus ipsum eum excepturi. A corporis blanditiis vitae!</p>
<p>Totam porro necessitatibus nobis, consequatur saepe sint, nam dolore earum deleniti, consectetur reprehenderit. Et assumenda repellendus quibusdam aut reiciendis placeat sint. Temporibus labore totam dolores alias minus consequuntur recusandae soluta.</p>
<p>Voluptatibus cupiditate architecto, nisi culpa praesentium nemo, unde cumque aliquam nostrum id quae quos saepe in obcaecati. Accusantium perferendis praesentium corporis nam at fugit ad consectetur, sunt rem dignissimos doloremque!</p>
<p>Rem nam consequatur sint nesciunt mollitia, reprehenderit aut sunt similique corporis molestiae neque magnam delectus eos ipsa assumenda repudiandae dolor earum! Doloremque ipsa quibusdam nulla enim deleniti, eum dolor eveniet!</p>
<p>Harum, quibusdam vitae ratione eligendi consequuntur enim ipsa non nostrum, ipsum alias atque blanditiis quia minima porro repellendus cupiditate aut doloribus. Quam est quasi culpa quos, dolorem suscipit vitae expedita!</p>

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;900&display=swap");

body {
  font-family: "Rubik", system-ui, sans-serif;
  letter-spacing: 0.55px;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 400px;
  padding: 2rem;
}
h1 {
  font-size: 3.2rem;
}

body.font-loaded {
  letter-spacing: 0px;
}

const font = new FontFaceObserver("Rubik", {
  weight: 400
});

font.load().then(function() {
  document.body.classList.add("font-loaded");
});