Skip to content

From Font

<script lang="ts" setup>
import { Loader } from 'vue3-pixi'

const fonts = {
  'ChaChicle': 'https://pixijs.com/assets/webfont-loader/ChaChicle.ttf',
  'Lineal': 'https://pixijs.com/assets/webfont-loader/Lineal.otf',
  'Dotrice Regular': 'https://pixijs.com/assets/webfont-loader/Dotrice-Regular.woff',
  'Crosterian': 'https://pixijs.com/assets/webfont-loader/Crosterian.woff2',
}
</script>

<template>
  <Loader :resources="fonts">
    <text :x="60" :y="50" :style="{ fontFamily: 'ChaChicle', fontSize: 34 }">
      ChaChicle.ttf
    </text>
    <text :x="60" :y="150" :style="{ fontFamily: 'Lineal', fontSize: 34 }">
      Lineal.otf
    </text>
    <text :x="60" :y="250" :style="{ fontFamily: 'Dotrice Regular', fontSize: 34 }">
      Dotrice Regular.woff
    </text>
    <text :x="60" :y="350" :style="{ fontFamily: 'Crosterian', fontSize: 34 }">
      Crosterian.woff2
    </text>
  </Loader>
</template>