CSS - Getting weird font rendering - html

Question

I'm just doing the navbar and when I go to the browser all font families it render like this:
Rendering like this
Here is my code:
fonts.css:
/* #font-face */
#font-face {
font-family: 'Roboto';
src: '../fonts/Roboto-Light.ttf';
}
style.css:
/* import fonts from fonts.css file */
#import url(./fonts.css);
#import url(./partials/variables.css);
/* Start Navigation */
.headerArea .mainMenu .navbar .navbar-brand {
padding: 0 2rem 0 5rem;
}
.headerArea .mainMenu .navbar {
padding: 1rem 15rem;
}
.headerArea .mainMenu .nav-item .nav-link {
/*font-family: 'Roboto', cursive; */
font-family: var(--roboto);
font-weight: 300;
padding: 1.7rem;
color: var(--title-color);
}
/* End Navigation */
variables.css:
html,
body {
margin: 0%;
box-sizing: border-box;
width: 100%;
height: 100%;
}
/* CSS Variables */
:root {
--primary-color: #4458dc;
--primary-color2: #854fee;
--title-color: #141313;
--text-color: #777777;
--border-color: #201f1f17;
--gradient-color: linear-gradient(90deg, #4458dc 0%, #854fee 100%);
--primary-color: #4458dc;
--primary-color: #4458dc;
/* font family variables */
--roboto: 'Roboto', cursive;
}
I tried more font families and they all got this aspect.
I'm using Bootstrap 5, dont know if that is a problem.

Answer 1

There is a syntax error in the fonts.css file. The font source should be written as follows, using parentheses:
src: url(../fonts/Roboto/Roboto-Regular.ttf);