feat: add new `font composables`

[ivodolenc]

Types of Changes

• [x] Bug fix 🐛
• [x] New feature 🚀
• [x] Documentation 📖

Additional Details

• Fixes and improves some types
• Impoves documentation
• Removes all dependencies (except @nuxt/kit since it's required)
• Removes fontLoader.logs option since it's no longer needed
• Refactores utils for easier maintaining
• Adds new fontLoader.autoImport option

Request Description

Adds new font composables.

Custom functions designed to load fonts on a specific page only. Using this composables, the font sources will not be loaded globally, but only on the page from which the function is called.

useLocalFont

Import the function where you need it.

<!-- index.vue -->

<template>
  <h1 class="font-aspekta">Nuxt Font Loader</h1>
</template>

<script setup lang="ts">
  import { useLocalFont } from 'nuxt-font-loader/app'

  useLocalFont([
    {
      src: '/fonts/Aspekta.woff2',
      family: 'Aspekta',
      class: 'font-aspekta' // optional
    }
  ])
</script>

useExternalFont

Import the function where you need it.

<!-- index.vue -->

<template>
  <h1 class="font-inter">Nuxt Font Loader</h1>
</template>

<script setup lang="ts">
  import { useExternalFont } from 'nuxt-font-loader/app'

  useExternalFont([
    {
      src: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
      family: 'Inter',
      class: 'font-inter' // optional
    }
  ])
</script>