Unable to load ttf fonts - html

Question

I have a CSS file that attempts to import Open Sans. I'm using ttf fonts downloaded from Google Fonts. I can't seem to get the font to work. It's still displaying the regular Times font.
fonts.css
#font-face {
font-family: "Open Sans";
src: url("fonts/OpenSans-Regular.ttf") format("ttf");
}
app.css
body {
font-family: "Open Sans";
}
index.html
<link rel="stylesheet" href="dist/fonts.css" />
<link rel="stylesheet" href="dist/app.css" />
My directory structure is like so:
/app
- dist
- fonts
app.css
app.js
fonts.css
index.html
I've used Chrome's inspector to check if the font file is being pulled in, but it isn't. There's also no error. If I include the css file directly from Google then it works. I also notice that Google serves a different font format that isn't ttf.
Note that I am developing a desktop application using Electron. Electron is powered by Chrome. My application is intended to run offline, hence why I am not linking directly to Google.
Any idea what's going on?

Answer 1

The following worked:
#font-face {
font-family: "Open Sans";
src: url(fonts/OpenSans-Regular.ttf) format("truetype");
}

Answer 2

The following code worked for me. Using JavaScript to load the font
let openSans= new FontFace('Open Sans', 'url(./fonts/mem8YaGs126MiZpBA-UFUZ0bbck.woff2)');
openSans.load().then(function(loaded_face) {
document.fonts.add(loaded_face);
document.body.style.fontFamily = '"Open Sans", Arial';
}).catch(function(error) {
// error occurred
console.error(error);
});

Answer 3

If you want to use google fonts you don't need to upload fonts files into your website folder, just add this url to your file html (
)
and use font family in css : font-family: 'Open Sans', sans-serif;