1. Неверные пути
2. Подключили файлы только для жирного шрифта, а пишете обычным.
3. Битый шрифт
4. Например, в шрифте нет кириллицы, а хотите писать кириллицей.
p.s. Вообще, современным браузерам достаточно woff2. Если нужно поддерживать предыдущее поколение, то ещё + woff, а не вот эта вся помойка.
Что мы видим в макете:
нумерованный список с текстом.
У каждого элемента кроме последнего по три украшения.
Стрелки можно убрать в фон (или всего списка или элемента).
Останется два псевдоэлемента: один используем под счетчик через counter-reset, couter-increment, другой для svg'шки.
И дальше через nth-child располагаете текст и псевдо в каждой li.
А у вас они снаружи?
Прямо так и написать.
Теги для белых блоков внутри тега для темного...
Но судя по вопросу, вам разумнее пойти на фриланс.
Хотя там тоже придется как-то переформулировать задание, чтобы было понятно что у вас есть и что должны делать эти "белые блоки".
Нужно разобраться с собственной логикой.
Вы задали для синей полосы фикс высоту. Но хотите чтобы она растягивалась.
Придется определиться: либо одно либо другое.
1. Неверные пути
2. Подключили файлы только для жирного шрифта, а пишете обычным.
3. Битый шрифт
4. Например, в шрифте нет кириллицы, а хотите писать кириллицей.
p.s. Вообще, современным браузерам достаточно woff2. Если нужно поддерживать предыдущее поколение, то ещё + woff, а не вот эта вся помойка.