Skip to content

Web Font

<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
<script lang="ts" setup>
import { useScriptTag } from '@vueuse/core'
import { ref } from 'vue'

// Load them google fonts before starting...

const isLoaded = ref(false)

// @ts-expect-error
window.WebFontConfig = {
  google: { families: ['Snippet'] },
  active: () => {
    isLoaded.value = true
  },
}

const leapis = `${location.protocol}//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js`
useScriptTag(leapis).load()
</script>

<template>
  <pixi-text
    v-if="isLoaded"
    :x="50" :y="100"
    :style="{
      fontFamily: 'Snippet',
      fontSize: 34,
      align: 'left',
    }"
  >
    PixiJS text using the\ncustom "Snippet" Webfont
  </pixi-text>
</template>