Load and style text in a grid

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

<div class="container">
  <span class="roboto-regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra, lorem id feugiat scelerisque, lectus mi fringilla quam, ut pulvinar orci elit sed lectus. Vestibulum luctus venenatis ex quis gravida. Vivamus elit nibh, feugiat non dolor in, posuere interdum est. Quisque ornare, nulla sit amet eleifend pretium, turpis urna scelerisque.</span>
  <span class="ubuntu-regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra, lorem id feugiat scelerisque, lectus mi fringilla quam, ut pulvinar orci elit sed lectus. Vestibulum luctus venenatis ex quis gravida. Vivamus elit nibh, feugiat non dolor in, posuere interdum est. Quisque ornare, nulla sit amet eleifend pretium, turpis urna scelerisque.</span>
  <span class="segoe-ui-regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra, lorem id feugiat scelerisque, lectus mi fringilla quam, ut pulvinar orci elit sed lectus. Vestibulum luctus venenatis ex quis gravida. Vivamus elit nibh, feugiat non dolor in, posuere interdum est. Quisque ornare, nulla sit amet eleifend pretium, turpis urna scelerisque.</span>
  <span class="arial-regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra, lorem id feugiat scelerisque, lectus mi fringilla quam, ut pulvinar orci elit sed lectus. Vestibulum luctus venenatis ex quis gravida. Vivamus elit nibh, feugiat non dolor in, posuere interdum est. Quisque ornare, nulla sit amet...

CSS

:root {
  font-size : 16px;
  font-family: sans-serif;
}

.container {
  display:grid;
  grid-template: auto / repeat(4, 190px);
  gap:20px;
  margin-bottom: 20px;
}

.small {
  font-size : 14px;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1lh;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  line-height: 1lh;
}

.arial-regular {
  font-family: "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1lh;
}

.segoe-ui-regular {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1lh;
}