Логично, ведь вы перебиваете свойство src и применяется последнее.
Т.е. мало того, что неверно написано, так еще и перепутанном порядке.
В font-family при подключении пишут только название. Там нет ничего запасного. Запасной нужен, когда применяют шрифт.
Зачем вы в современном мире хотите загрузить eot и ttf вообще загадка. Вы реально собрались поддерживать ИЕ9 и подобные?
Что делать:
1. Открыть справочник или загуглить "подключение шрифтов из файла", посмотреть что и как пишется.
2. Загугилить каким браузерам какой формат файлов.
3. Для современных браузеров использовать woff2. Если нужна поддержка предыдущего поколения, после добавить еще и woff.
p.s. bold это обычно 700, но если уверены, что 900, то ок.
Альберт Макс, мне кажется, что красный фон появляется не при наведении, а при нажатии. На видео задержка между этими событиями. Но его качество оставляет место для сомнений.
Во-первых, решить.
Во-вторых, по вашей разметке плачет валидатор https://validator.w3.org/nu/
Не стоит советовать такое в эфир, лучше удалите побыстрее.
Ошибка намекает на лишний (непредвиденный) < (Иногда это может, наоборот, недостающий > или что-то с кавычками ).
Происходящее, что в js оказывается html намекает на тоже самое.
Есть всякие разные валидаторы - воспользуйтесь.
Также Шторм отлично подчеркивает ошибки или указывает их на отдельной вкладке.
А потом нужно переписать вопрос так, чтобы он перестал быть проблемой Шторма, Node js и лайвсервера.
Syrone, теоретически, через кастомные свойства css это возможно.
Правда, экономически невыгодно в случае со многими вариациями картинки.
Я бы, наверное, в таком случае, использовала picture, aria-hidden="true" и гриды.
Если клиент в принципе в силах подготовить картинки для новой пикчи... (сомнения)
А если не готов и всё равно будет обращаться к вам, то и CMS не при чем
