Problem with google-font when trying to load it locally - local

Question

I recently decided to load my font locally for performance purpose. I tried a bunch of script or solution like webfont.js but a couple of days ago I discovered "google-webfonts-helper".
It's a really interesting project and it is hosted on github. Essentially you choose your font, download them and that's it. So far so good except for one problem: I'm not sure it works properly.
So that's my effort, let's say that I want to use "open sans" as a font.
I'm on a wordpress environment, so I.
go to the website -> https://google-webfonts-helper.herokuapp.com/
download the folder with my fonts and put in my fonts folder (I'm in a wordpress environment).
Past and copy the css
CSS:
/* open-sans-300 - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../fonts/open-sans-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-300italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
url('../fonts/open-sans-v16-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url('../fonts/open-sans-v16-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('../fonts/open-sans-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
url('../fonts/open-sans-v16-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('../fonts/open-sans-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
url('../fonts/open-sans-v16-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
and my fonts are in the folder:
/public_html/wp-content/themes/myfolder/fonts
Everything easy except for the fact that, when I load my font, only some of them are loaded:
And that's the most problematic part because it is really hard to debug.
Essentially, it loaded only some fonts, not all of them.
And I didn't find any console error and they seem the same so it was impossible to understand what went wrong.
Any thoughts?

Answer 1

I expect that the main problem is that the Open Sans font is not available to your terminal, which is what the local code references. Even if the font is saved on your terminal, it will only be available to the page (locally) if it is activated in the terminal's operating system.
You are not incorrect to use the local reference in your link, because it will greatly reduce your load time... but only if the user has that font loaded on their personal terminal. It appears that the herokuapp assumes this as a best practise as well.
What you likely want to do, is to point the website first to the local fonts, and then successively to the font files stored on your server. Like so:
#font-face {
font-family:'Open Sans';
font-style:normal;
font-weight:300;
src: url('Open_Sans/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light'), local('OpenSans-Light'),
url('Open_Sans/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Open_Sans/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('Open_Sans/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
url('Open_Sans/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('Open_Sans/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
This will tell the user's browser to first look for the font file locally – and if it fails to find a matching file – to then look for the file on your website's server. The browser will iterate through this list in order, starting from the local reference at the top of your list, and then proceeding through the url references if the order that you list them in your code.
The browser doesn't load all of the font files. I'm not sure who among us are privy to the "load order" choices that the various browser development companies have made. I doubt, however, that these choices were arbitrary or idiosyncratic. I would guess that it is fastest first, or most-compatible first; whichever makes the most logical sense. I have to assume that it will skip over any font file it deems to be incompatible. Because of this, you will note that my code above includes fallback options for maximum compatibility of browser and font file. I've commented in some labels to illustrate this.
Hoping that this helps you out.
Lastly, the herokuapp is awesome, I agree.