Components > Font Selector

YourSampleComponent.vue

import { FontSelector } from "@/components/app-components";

Explore the wonders of our Font Picker component! 🎉 Select from an impressive collection of +4300 font families, each showcased in its unique style. With the user-friendly Font Picker component in Nuxt Starter AI, users can easily choose the perfect font by viewing all the options rendered in the font itself

Here's an example of how to use the component: (it's easy and practical 🙂)

components/YoueSampleComponent.vue

  <template>
    ...
      <AppFontSelector v-model="selectedFont" />
    ...
  <template />

  <script lang="tsx" setup>
    import { ref } from "vue";

    const selectedFont = ref('');

    watch(() => selectedFont.value, (fontFamily) => {
      document.head.insertAdjacentHTML(
        "beforeend",
        "<style>@import url('https://fonts.googleapis.com/css?family=" + fontFamily + "');</style>"
      );
      var font = new FontFaceObserver(fontFamily);
      font.load().then(() => {
        const fontElement = document.getElementById("font-display");
        if (fontElement != null) {
          fontElement.style.fontFamily = fontFamily;
        }
      });
    });

  </script>
  <style>
  </style>
  

All the properties of the component are typed using TypeScript, so you're in good hands 🙂