How to use the @uifabric/merge-styles.fontFace function in @uifabric/merge-styles

export function getIcon(name?: string): IIconRecord | undefined {
  let icon: IIconRecord | undefined = undefined;
  const options = _iconSettings.__options;

  name = name ? normalizeIconName(name) : '';
  name = _iconSettings.__remapped[name] || name;

  if (name) {
    icon = _iconSettings[name!] as IIconRecord;

    if (icon) {
      let { subset } = icon;
      if (subset && subset.fontFace) {
        if (!subset.isRegistered) {
          fontFace(subset.fontFace);
          subset.isRegistered = true;
        }

        if (!subset.className) {
          subset.className = mergeStyles(subset.style, {
            fontFamily: subset.fontFace.fontFamily,
            fontWeight: subset.fontFace.fontWeight || 'normal',
            fontStyle: subset.fontFace.fontStyle || 'normal'
          });
        }
      }
    } else {
      if (!options.disableWarnings && options.warnOnMissingIcons) {
        console.warn(`The icon "${name}" was used but not registered. See http://aka.ms/fabric-icon-usage for more information.`);
      }
    }

function _registerFontFace(fontFamily: string, url: string, fontWeight?: IFontWeight, localFontName?: string): void {
  fontFamily = `'${fontFamily}'`;

  const localFontSrc = localFontName !== undefined ? `local('${localFontName}'),` : '';

  fontFace({
    fontFamily,
    src: localFontSrc + `url('${url}.woff2') format('woff2'),` + `url('${url}.woff') format('woff')`,
    fontWeight,
    fontStyle: 'normal',
    fontDisplay: 'swap'
  });
}

function _registerFontFace(fontFamily: string, url: string, fontWeight?: IFontWeight, localFontName?: string): void {
  fontFamily = `'${fontFamily}'`;

  const localFontSrc = localFontName !== undefined ? `local('${localFontName}'),` : "";

  fontFace({
    fontFamily,
    src: localFontSrc + `url('${url}.woff2') format('woff2'),` + `url('${url}.woff') format('woff')`,
    fontWeight,
    fontStyle: "normal"
  });
}

export function getIcon(name?: string): IIconRecord | undefined {
  let icon: IIconRecord | undefined = undefined;
  const options = _iconSettings.__options;

  name = name ? normalizeIconName(name) : '';
  name = _iconSettings.__remapped[name] || name;

  if (name) {
    icon = _iconSettings[name!] as IIconRecord;

    if (icon) {
      let { subset } = icon;
      if (subset && subset.fontFace) {
        if (!subset.isRegistered) {
          fontFace(subset.fontFace);
          subset.isRegistered = true;
        }

        if (!subset.className) {
          subset.className = mergeStyles(subset.style, {
            fontFamily: subset.fontFace.fontFamily,
            fontWeight: subset.fontFace.fontWeight || 'normal',
            fontStyle: subset.fontFace.fontStyle || 'normal'
          });
        }
      }
    } else {
      if (!options.disableWarnings && options.warnOnMissingIcons) {
        warn(`The icon "${name}" was used but not registered. See http://aka.ms/fabric-icon-usage for more information.`);
      }
    }

export function initFontFaces(fontRoot: FontRefernence) {
  const fontCalc = _.isFunction(fontRoot) ? fontRoot : x => `url(//${fontRoot}/assets/fonts${x})`;

  for (let font of SetiTheme.fonts) {
    fontFace({
      fontFamily: `"${font.id}"`,
      src: fontCalc(font.src[0].path.substr(1)),
      fontWeight: 'normal'
    });
  }
}