Человек

Эту задачу вполне можно решить на CSS:
Вот результат: https://codepen.io/Viperx/pen/xxzyqJL

У вас неправильный синтаксис объектов.
Это точно Javascript?

let dataValues = {
id_key: 'A005012',
marginToEquityRate: 0,
leverage: 0,
maxDD: 0,
std: 0,
};

dataValues.std = 1;
alert(`В объекте dataValues свойство std равно ${dataValues.std}`);

Сделал на чистом js.
Вот результат на основе вашего кода:
https://codepen.io/Viperx/pen/LYrZjZZ

Вот ребята, совершилось чудо.
Спустя 4 дня, я наконец-то смог понять, как это сделать.

C одним циклом.

$users = [
    ['name' => 'Mark', 'age' => 19, "weight" => 69],
    ['name' => 'John', 'age' => 27, "weight" => 78],
    ['name' => 'Sam',  'age' => 44, "weight" => 66],
    ['name' => 'Ethan','age' => 23, "weight" => 88]
];
     
foreach($users as  ['name' => $name, 'age' => $age, 'weight' => $weight]){
echo "<div class='xopa'> name:{$name} age:{$age} weight:{$weight} </div>";
}

С вложенным циклом:

foreach($users as  $items){
echo "<br>";

foreach($items as $index => $value){
echo "<div class='xopa'> {$index}:{$value} </div>";
}}

Попробуйте:
https://codepen.io/Viperx/pen/KKojZxo

Обычно на ПК(Windows 10)
шрифты хранятся по этому пути:
C:\Windows\Fonts\какой-то там шрифт

Если у пользователя по этому пути будет обнаружен шрифт,
который у вас на сайте, то браузер автоматически подключит данный шрифт.
Такой метод используется, чтобы ускорить загрузку страниц и уменьшить запросы к серваку.

А если у пользователя не будет шрифта на компе,
то браузер скачает данный шрифт у вас с сайта,
если конечно вы правильно указали путь по которому можно скачать шрифт.

Вот попробуйте, только замените ссылки картинкам на свои.
Ширина и высота вставляемых картинок должны быть одинаковы.
Например 8 картинок 200x200 пикселей.
https://codepen.io/Viperx/pen/OJveXoJ