Locally hosted Google Font not loading - css

Question

I would like to host Google fonts locally on a webhosting server.
However, the fonts are not loading. I tried to simplify the implementation and used these styles in my index.html:
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('open-sans-v15-latin-regular.woff2') format('woff2'),
url('open-sans-v15-latin-regular.woff') format('woff'),
url('open-sans-v15-latin-regular.ttf') format('truetype'),
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('open-sans-v15-latin-700.woff2') format('woff2'),
url('open-sans-v15-latin-700.woff') format('woff'),
url('open-sans-v15-latin-700.ttf') format('truetype'),
}
body{ font-family:"Open Sans",serif; }
</style>
The .woff and .ttf files located in the root beside of the index.html.
I have provided the fallback font 'serif' to try and pin down the error.
The site always shows the fallback 'serif' instead of 'Open Sans'.
In the DevTools 'Sources' Tab I can see that the font was not loading, but there is no error in the 'Console' or the Server-Log.
How can I fix this?
Update: like CrissCrossCrass's hint, there was an syntax error. After the last src-definition there has to be a semicolon instead of a comma (after format:('truetype')). Correct styling was:
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('open-sans-v15-latin-regular.woff2') format('woff2'),
url('open-sans-v15-latin-regular.woff') format('woff'),
url('open-sans-v15-latin-regular.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('open-sans-v15-latin-700.woff2') format('woff2'),
url('open-sans-v15-latin-700.woff') format('woff'),
url('open-sans-v15-latin-700.ttf') format('truetype');
}
body{ font-family:"Open Sans",serif; }
</style>

Answer 1

How is your file directory structured? There is a possibility that the references to your font files do not actually point to your font files. Also, you would want the style tag to be placed before your HTML tags.

Answer 2

Open Network tab in developer tools and see if the files are actually loaded if not and you get NOT FOUND then check your directory structure.