Promise fails when font is installed locally (known bug in Chrome on Mac OS X) about fontfaceobserver

[albertogasparin]

+1 Same thing here (but with "Lato").

[bramstein]

So there are two different things at play here:

1. Google Fonts using the same name as a (potentially) locally installed font
2. Metric compatible fonts (e.g. Lato)

The problem with 1 is that from the perspective of FontFaceObserver PT Sans (local) and PT Sans (Google fonts) are indistinguishable. So what happens is that FontFaceObserver tries to detect a font by using its font family name. At that point the browser just applies the local font, and FontFaceObserver detects that. So it doesn't wait until the web font has loaded. The reason the promise is rejected for the locally installed font is problem 2.

The problem with 2. is most likely the bug reported in #9. I'm working on a fix for that, and I'm hopeful it will also resolve this one.

The only thing that will not work either now or in the future is detecting a web font that has the same name as a locally installed font (in this case it will resolve as soon as the local font is applied --- which maybe is acceptable behaviour).

[albertogasparin]

Ok, so in my case FFO was not working correctly because, by having Lato installed locally, the promise was rejected. However, with the new version of Chrome (41) this bug is gone. So now I have the promise resolving successfully (same code as before...). IMHO, this issue could be closed. 😉

[bramstein]

I believe I fixed the bug for locally installed fonts with v1.4.3. Could you give that a try and see if it resolves your problems?

[kompot]

Yeah, I observe the same — with Chrome 41 and 1.4.2 the bug is gone.
Closing issue, thanks!

[jaicab]

Hi @bramstein,

Big fan of FontFaceObserver, thanks for that. I've been playing around with it lately but found this same issue. Promise gets rejected when trying to load a local font.

My current project is pretty complex so I've made a minimal demo to test/reproduce the problem more easily. It's testing Arial at the moment, although it doesn't matter, as long as it's a locally installed font, the Promise gets rejected. I added Open Sans to check that switching to it does resolve without any issues.
I'm using FontFaceObserver 1.4.6 with the Promise polyfill, you'll find the relevant code at the bottom of the JS tab. https://jsbin.com/cogipa/edit?html,js,console

So far it fails on almost all modern desktop browsers, as of today Chrome 48, Chrome Canary 50, Firefox 44 and Opera 35, but works fine on Safari 9.0.3.

Thanks

[bramstein]

@jaicab Hmm. Font Face Observer is using the native font loading API if it is available. The native font loading API does not support detecting locally installed fonts, but it is a huge improvement in performance. Maybe we can do a special build for cases like this? I think for the majority of users it is an improvement.

[jaicab]

Oh sorry @bramstein, I just realized I was assuming it did detect locally installed fonts all along, that's why I was so surprised with its faulty behavior.
And if it's possible, yes! It would be great, the setup I have works on this basis of being able to detect locally installed fonts.
Let me rephrase all this on a new issue.

[jaicab]

Ok all moved to #55!