Эти теги не висят же в воздухе, а принадлежат какому-то блоку. Там и надо определять.

Я делаю так: https://github.com/vithar/bem.info/blob/master/common.blocks/article/article.css

подскажите, кто как определяет стили для тэгов h1, h2, h3 .....?

В идеале это должен быть отдельный блок:

block('heading').tag()(function() {
    return 'h' + this.mods.level || 1;
});

Но если нет возможности управлять разметкой, то +1 за вариант @vithar

Где Вы подключаете шрифты?

Зависит от. Если кастомным шрифтом набран основной текст сайта, то его стоит асинхронно закешировать, а применить только при следующем заходе пользователя на страницу (и помнить, что на мобильных будет тормозить не только загрузка, но и рендеринг).

Если он используется для незначительных декоративных целей, то можно подключать перед закрывающих </body>.

А если, скажем, там очень ограниченный набор символов, но критично важный (например, логотип), то можно заинлайнить прямо в основной CSS или даже в HTML.