empty src: local('')

[jonas-herkelmedia]

The @font-face has always an empty string for src: local(''). This was not the case a few months ago.

[paulca55]

I came here to report the same issue. It looks like Google have removed the local() function due to lot of users having problems with local fonts not correctly representing what the user should see.

https://twitter.com/googlefonts/status/1323363090969333762

[jonas-herkelmedia]

Ok now it makes sense. The local fonts are often outdated, but i heard there is a problem with an empty local() function on Android devices. Isn't it best to remove it completely?

https://github.com/majodev/google-webfonts-helper/issues/84

[paulca55]

Yes I would of thought so, makes no sense to me to be there. Most likely just needs updating in the tool itself.

On Thu, 28 Jan 2021 at 9:02 pm, Jonas Herkel notifications@github.com wrote:

Ok now it makes sense. The local fonts are often outdated, but i heard there is a problem with an empty local() function on Android devices. Isn't it best to remove it completely?

84 https://github.com/majodev/google-webfonts-helper/issues/84

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/majodev/google-webfonts-helper/issues/124#issuecomment-769390803, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABV3A5X5RZDU6BCJYE4YYL3S4HGF3ANCNFSM4WVKH5WQ .

--

Paul Cass Cassify Ltd Email: paul@cassify.co.uk Website: www.cassify.co.uk

Cassify Ltd is a company registered in England and Wales with company number 08295916. Registered Office: 176 High Hope Street, Crook, Co. Durham, DL15 9JA.

This message is intended for the use of only the person(s) ("intended recipient") to whom it is addressed. It may contain information that is privileged and confidential. Accordingly, any dissemination, distribution, copying or other use of this message or any of its content by any person other than the intended recipient may constitute a breach of civil or criminal law and is strictly prohibited. If you are not the intended recipient, please contact the sender as soon as possible.

[j-hoffmann]

We have experienced problems with the empty src: local('') declaration. There was one machine which would not load the webfonts, instead it would always use the font 'Dummies' which is locally installed. The problem occurs in Chrome and Edge browsers but not in FireFox.

I suspect that the local font file lacks some name definition field (or it is empty). The name being empty then matches the empty local call.

We also found someone who seems to have come across the same problem and posted on the Chrome support page.

[witcher83]

The src: local('') could be filled with the font-family value. In this way, the browser will check if the font is already present in the local machine and avoid downloading it. For example, in the case of the "Raleway" font, it should be: src: local('Raleway')

[gsauthof]

The local fonts are often outdated, but i heard there is a problem with an empty local() function on Android devices. Isn't it best to remove it completely?

FWIW, for my use cases local outdated fonts aren't a big concern. You could make it optional. AFAICS, simply removing it definitely is an improvement over having an empty local('') declaration.

[mangelozzi]

For example Roboto, this is what local should be set to: (If set to '', then it will use network fonts always. If set to Roboto, will always use the regular font-weight version.

/* ----------------------------------------------------------------------------
   ROBOTO
*/
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto-Light'),
       url('/static/fonts/roboto-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/static/fonts/roboto-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto-Regular'),
       url('/static/fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/static/fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto-Medium'),
       url('/static/fonts/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/static/fonts/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'),
       url('/static/fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/static/fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

[osworx]

Maybe read this why filling the local variable with a name is not the best idea: https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

What I've done is described below with the code I'm using - works perfectly. Ordering of the fonts is from "Super Modern" > "Forgetable" browser from the bottom to top (the way the fonts are called) - I think how this project orders the fonts should be also changed ..

Assuming your fonts are 1 folder higher than the css itself (fonts/). Comments can be deleted (just here for demonstration). And - finally - the css (especially when many fonts are used) should be minimized (save approx- 30%) :)

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot'); /* IE9 Compat Modes */
  src: local('😡');
  src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.svg#OpenSans') format('svg'), /* Legacy iOS */
       url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff2') format('woff2'); /* Super Modern Browsers */
}

[DanielRuf]

@majodev please remove the local('')part.

Users of Adobe Photoshop told me, that they see only broken / weird characters due to a locally installed font with no name.

Also when I copy the code from your Google Webfonts Helper, I always have to manually remove this part and also recommend the same to others.

Others still blindly copy this code and don't understand why they get some foreign-looking glyphs instead of the expected font.

Never use any local(...)because then you have no control over the displayed fonts.

[DanielRuf]

The src: local('') could be filled with the font-family value. In this way, the browser will check if the font is already present in the local machine and avoid downloading it. For example, in the case of the "Raleway" font, it should be: src: local('Raleway')

How do you know if they have the same font version that you use so that all glyphs can be displayed as expected? You can't. Often these local versions are totally outdated, are missing features like ligatures and contain bugs. No user will update the locally installed version when your website looks broken. They often will say, that your websites / fonts on your server are broken.

[majodev]

Will be removed with the next release.

[DanielRuf]

Will be removed with the next release.

Perfect. If needed, here is a small PR: https://github.com/majodev/google-webfonts-helper/pull/166

I guess these server parts are also relevant: https://github.com/search?q=repo%3Amajodev%2Fgoogle-webfonts-helper+localName&type=code

[majodev]

Fixed in v1.1.0.