Javascript: Load fonts concurrently, via `new FontFace`

loadFonts.js

window.addEventListener('DOMContentLoaded', async () => {
   const fonts = ['Action Man', 'Heaven', 'Weltron Urban']
   
   // First method (if you don't need to know when all fonts are finished loading)
   fonts.forEach(font => {
      new FontFace(font, `url(fonts/${encodeURIComponent(font)}.woff)`).load().then(font => { document.fonts.add(font) })
   })
   
   // Second method (if you do need to know when all fonts are finished loading)
   const promises = []
   fonts.map(font => {
      promises.push(new FontFace(font, `url(fonts/${encodeURIComponent(font)}.woff)`).load().then(font => { document.fonts.add(font) }))
   })
   await Promise.all(promises)
   console.log('All fonts loaded')
})