Importing styles from an external library to index.html:

import 'outside-library/styles/main.css';

The main.css file contains custom fonts:

@font-face {
    font-family: 'Noto Sans';
    font-weight: 800;
    src: url('../assets/NotoSans-ExtraBold.ttf');
} 

Everything works fine, but ttf fonts have a large size. I want to redefine this font and upload it in woff/woff 2 format. I made a new css file in which I wrote:

@font-face {
    font-family: 'Noto Sans';
    font-weight: 800;
    src: url('../assets/NotoSans-ExtraBold.woff');
}

but wherever I connect a new file: before or after main.css, the browser still loads the ttf font. Is there any way to redefine @font-face?