<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:[email protected];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");
});
This Pen doesn't use any external CSS resources.