empty local('') causes font failure on all Android devices

[dnikub]

If the generated @font-face rule contains an empty string for src: local(''), the font files won't load on Android devices and therefor only the fallback fonts are displayed.

It's not that the fonts just don't get displayed, if you take a look at the network tab in the dev tools you can see they are non existent (not even a 404, there's just nothing). It doesn't matter which browser you use on your phone (I tested Samsung and Huawei with all browser variations), on mobile devices the fonts just won't show. However, on desktop it works (tested in Firefox, Chrome, Edge, IE11, Opera on Mac & Windows).

The code snippet I used on my Website:

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v24-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}

After removing the empty local(''), everything worked perfectly everywhere.

I therefor would advise to remove the local('') from the @font-face rule everyone will copy-paste, if it is empty.

[majodev]

hm, I'm no longer 100% sure how an empty local('') got in there in the first place... Seems like it's there to support IE6-8, see this stackoverflow issue.

Looks like local('☺') [sic!] is the way to go now (only applies to fonts without proper local name). 🙈

[majodev]

v1.1.0 removes local('')