Google Font not displaying when hosted locally - css

Question

i'm building a website with Wordpress and want to use the Montserrat Google Font. I was made aware of the fact that establishing a connection to fonts.google.com could lead to problems regarding the new european General Data Protection Regulation, so i downloaded the font using Google Webfonts Helper.
I tried it locally (on my computer) with a copy of the website and it works perfectly. But when i apply the changes to the actual website the font is not being displayed.
The Firefox Network Analysis Tool shows the font being downloaded correctly.
However it does not appear in the fonts tab.
Any advice on how to debug this one?
EDIT: Heres the css
/* montserrat-regular - latin */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('../fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
src: local('Montserrat Bold'), local('Montserrat-Bold'),
url('../fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
--
h1, h2, h3, .widget-title, h4, h5, h6 {
line-height: normal;
letter-spacing: 0;
margin: 0 0 15px 0;
font-family: "Montserrat", sans-serif;
font-weight: 400;
color: #2d2d2d;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
EDIT 2: When using Chrome and goint to the network tab, the font files are marked as canceled instead of 200 OK. Console sais it has been blocked because "No 'Access-Control-Allow-Origin' header is present on the requested resource."
EDIT 3: I noticed that in the network tab (back in FF) the host for all resources is
url.com
but for the font files it is
www.url.com

Answer 1

Without seeing the CSS-Code it is hard to say what could have gone wrong.
Due to your concerns about the regulation:
What I know about is that using Google Fonts is legal if you inform you pack that information in your declaration of data protection.
Hope that helps

Answer 2

Ok apparently i messed up with the paths. I moved the font files into the wordpress folder, changed the path in the css accordingly and now it works though i don't really know why firefox showed me that the GET request was successful.
url('../fonts/....
is now
url('/fonts/.....