Load font face for use in WebComponents

load-font-face.ts

function loadFontFace(
  fontName: string,
  url: string,
  fontWeight: string = 'normal',
  fontStyle: string = 'normal',
  format: string = 'woff2'
) {
  // Add custom font to page DOM since font-face doesn't work within Shadow DOM.
  let element = document.getElementById(`custom-loaded-${fontName}`);

  // Only inject the element if it's not yet present
  if (!element) {
    element = document.createElement('style');
    element.innerHTML = `
      @font-face {
        font-family: '${fontName}';
        font-style: ${fontStyle};
        font-weight: ${fontWeight};
        src: local('${fontName}'), url('${url}') format('${format}');
      }
    `;
    document.head.appendChild(element);
  }
}