Решил вопрос с помощью preserveAspectRatio="none"
Демо: https://jsfiddle.net/RadCor/esf16w9y/3/

Ни когда не использовал эти бутсрепы, и использовать не буду. Ерунда полная.
Лучше делать всё самому. При вёрстке адаптивных макетов всегда пользуюсь media queries и вам советую.
По поводу flex, я делаю сетку таким образом: jsfiddle.net/0et4kh52
Сожмите окно с результатом, и увидите как 3 колоночная сетка перестроилась в 2 колоночную.
Всё элементарно ;)

Так а почему их не заливать на сайт для которого вы приминяете эти шрифты?
Я к примеру всегда заливаю шрифты или на сайт на котором эти шрифты применяю.
Или на свой сайт заливаю, и с него подключаю.

Для этого не нужен ни какой плагин. Делается на чистом CSS3.
Держите: jsfiddle.net/ma1z3z73/2

Пришлось усердно погуглить, что бы найти решение.
А решение оказалось очень простым.
Вместо get_template_part() использовать более низкоуровневую функцию locate_template()
include (locate_template('header.php'));