CSS Font Loading Module Level 3

App.vue

<template>
  <div id="app">The quick brown fox jumps over the lazy dog</div>
</template>

<script>
async function loadFont () {
  const font = new FontFace('Hack Regular', 'url(./hack-regular.woff2)')
  await font.load()
  document.fonts.add(font)
  document.getElementById('app').classList.add('font-loaded')
}

export default {
  beforeMount () { loadFont() }
}
</script>

<style>
  #app { font-family:  Arial, sans-serif; }
  #app.font-loaded { font-family: 'Hack Regular', monospace; }
</style>