Font is thinned out at the edges when using #font-face - css

Question

When I am adding a font to my website via a google fonts tag, my font displays fine. But when I add it as a file via #font-face, it gets thinned out.
Example:
Here's the code that I use:
.title {
color: white;
font-family: 'myBodoni', serif;
position: absolute;
top: 120px;
left: 200px;
font-size: 64px;
z-index: 2;
line-height: normal;
}
.img {
position: relative;
margin: 3%;
}
#font-face {
font-family: myBodoni;
src: url(bodoni-variable.ttf); //variable file downloaded directly from google fonts
}
When I add this code, it works properly:
Css:
font-family: 'Bodoni Moda', serif;
Html
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda&display=swap" rel="stylesheet">
Here's how it looks with the following code

Answer 1

It is because you are only adding one #font-type. You need to add #font-type for eot, woff2, woff & svg:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}