Rheinmetall

Воспользуйтесь сервисами для генерации набора web-шрифтов.
Они же сгенерируют css для корректного подключения.

www.fontsquirrel.com/tools/webfont-generator
https://transfonter.org/

Рекомендую второй.

Потому что href="#" ведет в начало документа. Сделайте href="javascript:void(0)"

jsfiddle.net/6h74c/3

Margin collapsing (схлопывание внешних отступов)

Через clip-path или mask-image можно

Он у вас просто ставит translate(20px,0) 1 раз, надо каждый раз:
1) получить значение
2) увеличить на 20
3) записать translate(NEWpx,0)
т.е. было 0+20, потом 20+20, потом 40+20 и т.д.

Вариант с изменением верстки: добавить какой-нибудь элемент (span например) внутрь label, тогда он будет рядом с инпутом и можно будет использовать span + input:checked.

Вариант со скриптом:

$('.radio input').on('change', function(){
  $('.radio label').removeclass('hilight')
  $(this).closest('label').addClass('hilight')
})

Стоит. Каждой задаче свой инструмент. Если ангуляр и реакт вошли в моду, это не значит, что способы упрощённой манипуляции домом из неё вышли. Если тебе кто-то говорит, что jQuery - костыль для людей, не умеющих нативно перебирать ноды или писать xmlhttprequest - скажи им, что компьютер - это костыль для людей, не умеющих жить без гугла и социалок. jQuery всегда будет популярен. Он упрощает простые обмены данных, классов в пределах DOM, умеет работать с ajax и значительно упрощает синтаксис.

Опусти style.css ниже bootstrap.min.css

Таким способом вы подключите только regular шрифт. На сайте google fonts при добавлении шрифта, есть ещё пункт customize где вы можите настроить начертания и т.д.
Вот пример:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext" rel="stylesheet">

В CSS используйте font-weight и font-style

font-family: 'Roboto', sans-serif;
font-weight: bold;
font-style: italic;

и т.д.