Font Loading Safari FontFaceObserver

by vijayweb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.js"></script>
<canvas id="c" width="400" height="130">
  <p>No canvas.</p>
</canvas>

CSS

body {
  background: #cccccc;
}

#c {
  display: block;
  margin: 10px auto;
  background: white;
}

@font-face {
  font-family: 'MyCustomFamilyWithLocal';
  font-style: normal;
  font-weight: normal;
  src: local('MyCustomFamilyWithLocal'), url(http://localhost/pixelpon/imgpro/assets/fonts/Gidugu%20Italic.otf) format('otf');
}

@font-face {
  font-family: 'MyCustomFamily';
  font-style: normal;
  font-weight: normal;
  src:  url(https://fonts.gstatic.com/s/gloriahallelujah/v8/CA1k7SlXcY5kvI81M_R28YGdvEu4SOXaLqFXyFUihk4.woff2) format('woff2');
}

JavaScript

// First time this is loaded the font family with a
// local src defined won't get pre-loaded but the
// promise will resolve. If you look at network you
// can see the indieflower font is only loaded after
// the 1 second delay.

const fontA = new FontFaceObserver("MyCustomFamily");
const fontB = new FontFaceObserver("MyCustomFamilyWithLocal");

Promise.all(font.load()).then(function () {
});