Как могу добавить font-face с .ttf (scss)

@font-face{
    font-family: 'Karla';
    src: url("app/fonts/karla/Karla-Regular.ttf")
}
p {
    font-family: 'Karla', sans-serif;
}

Не поможет ли, если добавить format("truetype") после url("…ttf")?

@font-face{
    font-family: 'Karla';
    src: url("app/fonts/karla/Karla-Regular.ttf") format("truetype");
}

Кстати, можете воспользоваться сервисом вроде этого, сгенерирует валидный CSS и заодно сконвертирует шрифт в иные форматы для различных браузеров.

Странно, я всегда так подключаю.

Возможно у вас не правильно указан путь к шрифту (точкой "отправления" является сам файл css)?

Например у меня шрифт подключается так:

@font-face {
  font-family: 'PT Sans';
  font-weight: normal;
  src: url('../fonts/PT_Sans-Web-Regular.ttf');
}

Структура расположения файлов такая:

/css/style.css
/fonts/PT_Sans-Web-Regular.ttf
/index.html

Возможно необходимо просто поставить точку с запятой ;

src: url("app/fonts/karla/Karla-Regular.ttf")