fix(material-experimental/mdc-form-field): make sure fonts are loaded before calculating notch width

Author: annieyw

src/material-experimental/mdc-form-field/form-field.ts

@@ -340,7 +340,15 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
     this._updateFocusState();
     // Initial notch width update. This is needed in case the text-field label floats
     // on initialization, and renders inside of the notched outline.
-    this._refreshOutlineNotchWidth();
+    if (this._platform.TRIDENT) {
+      // FontFaceSet API is not supported in IE
+      setTimeout(() => this._refreshOutlineNotchWidth());
+    } else {
+      // Make sure fonts are loaded before calculating the width.
+      // FontFaceSet is technically still an experimental API at this time so the cast is needed
+      // as experimental API's aren't in the lib file.
+      (document as any).fonts.ready.then(() => this._refreshOutlineNotchWidth());
+    }
     // Enable animations now. This ensures we don't animate on initial render.
     this._subscriptAnimationState = 'enter';
     // Because the above changes a value used in the template after it was checked, we need