Самая лучшая мотивация для изучения чего-то нового, это найти заказчика и подписаться сделать что-то на том что хочешь изучить)))

Меню для ресторана хочешь "прикрепить"? Уже написал на HTML?

Я тут писал подробную инструкцию:
Как подключить нестандартные шрифты, чтобы они отрисовывались в canvas?

Попробуй так:

@font-face {
  font-family: "ProximaNova"; // двойные кавычки!!!
  src: url('../fonts/proxima_nova_light-webfont.eot');
  src: url('../fonts/proxima_nova_light-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/proxima_nova_light-webfont.woff2') format('woff2'),
  url('../fonts/proxima_nova_light-webfont.woff') format('woff'),
  url('../fonts/proxima_nova_light-webfont.ttf') format('truetype'),
  url('../fonts/proxima_nova_light-webfont.svg#proxima_nova_ltlight') format('svg');
  font-weight: 300;
  font-style: normal;
}

далее когда будешь назначать шрифт элементам пишешь без кавычек:

#d1 {
    font: 300 18px ProximaNova;  // без кавычек
}