Чудес не бывает, шрифту в любом случае надо загрузиться. То что первые секунды дефолтные шрифты показываются, это как бы нормально. Хуже, когда вообще ничего не показывается.
1. Увеличивайте высоту всей шапки, а не каждого элемента в отдельности. Элементы можно красиво анимировать через opacity.
2. Анимируйте появление на CSS, а не через js
Надо делать не фиксы, а наоборот классами задавать отсутствующие стили.
Задайте основное оформление на "container", а классами уже назначайте маржины, высоту и что там нужно.
Выигрыш пары килобайт или потенциальная поддержка старых браузеров, что лучше?
Если вы уж написали код для старых браузеров, то нет никакого смысла его потом убирать. От этого сайт не станет быстрее работать.
А для новых проектов, разумеется нужно использовать Autoprefixer.
Зачем у вас там вообще flex...в месте где вы блоки absolute позиционируете. Высота ограничена, flex-wrap не задан. Удивительно что вообще где-то работает.
Сделайте inline-block'и и text-align:center и всё нормально будет.
1. У блоков тоже есть родитель. Поэтому блок тоже "элемент" какого-то блока. Будет: "some-block header__block" где всё оформление вешаете на "some-block", а позиционирование на "header__block"
2. Нет. Это же в доках написано. Модификатор отдельно не существует. Можно создать "миксин"...типо универсальный класс, с набором правил.