Skip to content

Support for runtime dynamic font loading (from Database/API) #775

@maximepvrt

Description

@maximepvrt

Currently, @nuxt/fonts seems to load fonts only at build-time.

In my app, users can customize their theme (colors and fonts). These settings are stored in a database and applied via CSS variables.

I need a way to load a font family dynamically at runtime (e.g., via a composable or utility) while still benefiting from the module's features (local hosting, GDPR compliance, and provider abstraction).

Example:

<script setup>
const { data } = await useFetch('/api/settings')

// Something like this would be great:
useFont(fontName) 

const themeStyles = computed(() => ({
  '--current-font': data.value.font,
}))
</script>

<template>
  <div :style="themeStyles" class="font-custom">
    Hello World
  </div>
</template>

<style scoped>
.font-custom {
  font-family: var(--main-font);
}
</style>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions