Font doesn't consistently work IE11 SharePoint 2013 [closed]

Question

I'm trying to implement a Google font, which I've installed locally, into my master page. My CSS file implements the @font-face:

@font-face {
  font-family: 'LibreFranklin-SemiBold',
  font-style: 'normal',
  font-weight: 'normal',
  src: url('/*server_location*/theme/15/libre-franklin/libre-franklin-v2-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Libre Franklin SemiBold'), local('LibreFranklin-SemiBold'),
   url('/*server_location*/theme/15/libre-franklin/libre-franklin-v2-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('/*server_location*/theme/15/libre-franklin/libre-franklin-v2-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
   url('/*server_location*/theme/15/libre-franklin/libre-franklin-v2-latin-600.woff') format('woff'), /* Modern Browsers */
   url('/*server_location*/theme/15/libre-franklin/libre-franklin-v2-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
   url('/*server_location*/theme/15/libre-franklin/libre-franklin-v2-latin-600.svg#LibreFranklin') format('svg'); /* Legacy iOS */
}

Then I'll simply call the font in a class:

.my-class {
    font-family: LibreFranklin-SemiBold;
}

This works perfectly for every LibreFranklin font that isn't SemiBold. The SemiBold font will inconsistently show. If I refresh the window 10 times, I maybe see it 3-4 times, otherwise it'll just use the SharePoint default font. When inspecting the element with class my-class it will always say the font-family is LibreFranklin-SemiBold as the CSS file calls out, even though this isn't what's truly being displayed.

This problem only seems to be related to IE11.

Because this is a Google font, I had originally only been using the truetype (ttf) font, however, since getting the other font sets the IE11 Console now throws the error:

CSS3111: @font-face encounted unknown error.
File: libre-franklin-vs-latin-600-eot.

What would cause the sporadic display of this font?