Font cannot be rendered on canvas after active event on Safari

[belartodmarinus]

This might be related to #365 but as @nextend mentioned, it might be related to a bug in Safari's webkit.

I'm using the following code:
https://jsfiddle.net/hjqtqyvx/

This works in Firefox and Chrome but it doesn't work with the latest Safari 10.1.1 (12603.2.4), which displays the attached screenshot.

(note, this is only shown if the cache is cleared before (re)loading the jsfiddle)

Older versions of Safari show different behaviour (from just working to displaying a default font).

[nextend]

@belartodmarinus Try this: https://jsfiddle.net/hjqtqyvx/2/ -> If it fails in Safari, then its a problem with Safari itself.
This example use the native font loading api without Web Font Loader library.

[belartodmarinus]

Hi @nextend thanks for your reply, this doesn't seems to use the right font on Safari or Chrome...

I'm pretty sure this is a bug in Safari, my fiddle works on the developer preview of Safari (Release 33 (Safari 11.0)). If I remove the fillText line I don't see "Gloria Hallelujah" loading in the network inspector (although the active event is trigged).

I've also went ahead and tried using the native font loader from Safari and it's exactly failing in the same way; the promise is triggered but the font isn't loaded.

[mlev]

I also experience this issue using custom fonts in Safari - and it doesn't matter if you clear the cache. The issue occurs consistently when you have a local declaration in the src list. e.g.

src: local('MyCustomFamily'), url(https://server/font.woff2) format('woff2');

In this case the font isn't fetched up front at all - even though active event is triggered. Remove the local src and it works fine. See fiddle: https://jsfiddle.net/mlev/4w6jweo2/

The same thing happens with FontFaceObserver so guessing it's a Safari issue.

[bramstein]

I think it might be related to a bug in local(). Could you try WebKit nightly? It looks very similar to this bug: bramstein/fontfaceobserver#105

[AvaelKross]

I'm experiencing this bug, and I do not use local() at all. Yes, seems like in High Sierra beta the bug is fixed, but I can't force all users to update to a beta OS, so still looking for a workaround (we have a plenty of users with this exact version of safari)

[belartodmarinus]

@bramstein WebKit nightly supports the document.fonts.load API and don't require the fontwatchrunner workaround. This is (for me) the most important feature in webfontloader.

[fantasydr]

I'm guessing it is a bug related to url loading+local src. (Safari/iOS only)
If the font from url is not fully loaded and the local() is not installed, the issue happened.

I'm making a html5 game using webfont. In the beginning, all characters I've tried to render are question marks. But later it will be rendered correctly.

The bigger font file size, the more question marks I got. I use fontmin to reduce the size of font file, then I got less question marks. It seems the slower networking could also cause more question marks be rendered.

Anyway, remove the local() and only set url src could resolve the issue.

[mlev]

I still see this issue even after removing local() references - but does seem harder to trigger.

So can I clarify where we think the problem is? AFAIK webfontloader doesn't use the native loader for Safari 10 so this isn't a native loading issue. Is this just something the fontwatchrunner can't detect at the moment?

[belartodmarinus]

Yes, in my opinion this is a bug in Safari 10 which makes the current logic in fontwatchrunner unusable.

This is fixed in the new version of Safari (which has native font loading notifications).

[mlev]

Ok that makes sense - just a few different things mentioned in this thread.

I realised that my jsfiddle above was using 1.6.26 - which is still using native loader for Safari and works fine once I remove any local() refs. Given that the fontwatchrunner doesn't work for Safari 10 I'm tempted to rollback to that version. Is there any benefit of still using fontwatchrunner for Safari 10?

[vinch]

Has the fix been released in the latest version of Safari? I can't seem to reproduce the bug on my side.

[belartodmarinus]

@vinch it would help if you tell which Safari version you're using 😄

[vinch]

@belartodmarinus Indeed, sorry. I'm on Safari 11.0.1 (12604.3.5.1.1)

[csomakk]

we have a similar issue on iPad AIR on iOS 10.3.2.. reproduced the 1st fiddle too. simulator looks fine tho. nextens fiddle (/2) works fine on device.

[csomakk]

also happened iPhone 5C iOS 10.3.3. fix was:

 <head>
 <!-- ... -->
         <link rel="stylesheet" href="........../MyFontsWebfontsKit.css" media="all">
         <script>
             document.fonts.load('400 20px MyFONTNAME');
         </script>
 </head>

[ryancat]

This happened to me with safari 10.1. Things working fine in safari 11 for me. I am using google Roboto font and the font is not picked up by canvas at all.

WebFont.load({
    google: {
      families: ['Roboto']
    },
    active: function () {
      main();
    }
  });