Человек

Эту задачу вполне можно решить на 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

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

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

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

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

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