либо перебивать мобильные настройки через !important
Достаточно прочитать про вес селекторов и не делать лишней вложенности, тогда не будет импотантов.
Да и проверять ресайз на js это нормально.
Почему такой подход не используется, или я плохо искал?
Не используется, потому что обычно кроме цвета у элемента еще пачка свойств, которые не нужно переопределять. И при таком подходе их придется писать 2 раза.
Т.е. есть места, где он может быть целесообразен, но чаще нет.
Для современных браузеров достаточно форматов woff2 и woff. Причем сначала woff2 для продвинутых браузеров, а потом woff.
И не забывайте указывать альтернативные шрифты или хотя бы семейство.
А не работает, вероятно, потому что пути к файлам неверные. Либо шрифт кривой.
inavo, попробуйте переформулировать вопрос. Или подробнее опишите что у вас есть и чего нужно добиться?
Например, мне нужен обычный статический лендинг.
Я верстаю html блоками и используя препроцессор, потом собираю все gulp'ом. В итоге мне нужно получаю папку в которой есть один индексный файл и папки с css, js и картинками.
Если я делаю это для CMS значит файлики должны разложится по папкам по каким-то другим законам.
И т.д.
Так, чтобы была видна проблема.