Closed ivodolenc closed 1 year ago
@nuxt/kit
fontLoader.logs
fontLoader.autoImport
Adds new font composables.
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.
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>
<!-- 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>
Types of Changes
Additional Details
@nuxt/kit
since it's required)fontLoader.logs
option since it's no longer neededfontLoader.autoImport
optionRequest 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.
useExternalFont
Import the function where you need it.