why i can not load offline fonts downloaded from google font into my css file

I downloaded some of the google fonts to into my project directory. after that i did as following.

@font-face {
    font-family: "Roboto";
    src: url("./Roboto/Roboto-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}

this code is inside one css file i imported this css file into another one as

@import "/Resources/fonts/fonts.css"

.greeting {
    width: 200px;
    height: 100px;
    color: white;
    color: linear-gradient(white,blue);
    font-size: 3rem;
    font-family: "Roboto";
}

font does not take affect on text is there any problem