How can I add a font-face with .ttf (scss)

Wouldn't it help if you add format("truetype") after url("…ttf") ?

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

By the way, you can use a service like this , generate valid CSS and at the same time convert the font to other formats for different browsers.

Strange, I always connect it.

Maybe your font path is not correctly specified (the "send" point is the css file itself)?

For example, my font connects like this:

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

The file layout structure is as follows:

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

Perhaps you just need to put a semicolon ;

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