Using custom fonts

When trying to update fonts:

@font-face {
    font-family: 'Ubuntu-R';
    src: url('fonts/Ubuntu/Ubuntu-R.ttf') format('truetype');
}

@font-face {
    font-family: 'Ubuntu-B';
    src: url('fonts/Ubuntu/Ubuntu-B.ttf') format('truetype');
}

This line: src: url('fonts/Ubuntu/Ubuntu-R.ttf') format('truetype');

      @font-face declaration doesn't follow the fontspring bulletproof syntax

I am using Firefox but would like it to works in all browser.

ref: https://stackoverflow.com/questions/33475526/cant-understand-the-bulletproof-font-face-css-rule

Any clue why? I still do not understand which one to fix.