nuxt-fonty v1.0.0

Features

• Includes automatic optimization
• Provides a composable font strategy
• Designed for Nuxt 3+
• TypeScript friendly
• Super easy to use
• No dependencies

Size Info

Installation

1. Install nuxt-fonty to your project

npm i -D nuxt-fonty

2. Enable the module in the main config file

// nuxt.config.ts

{
  modules: ['nuxt-fonty']
}

That's it! Start developing your app!

Optimization

Fonty automatically optimizes all your font sources and improves page loading speed so you don't have to worry about it at all.

Strategy

To simplify, Nuxt Fonty is actually a lighter version of Nuxt Font Loader.

It's designed with the same API, but only supports local font loading. This results in simplicity and a much smaller final size which is awesome. Another difference is that there are no global settings.

Fonts are loaded via a custom function from the same domain as your deployment. Using this font composable, you can easily load fonts on different pages or layouts with performance, flexibility and privacy in mind.

Also, try to use variable fonts whenever you can to take advantage of their customization and fast loading speed.

Usage

Place the previously downloaded fonts in the public/fonts/ directory and simply import the function where you need it.

<!-- app.vue, layout.vue, page.vue ... -->

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

<script setup lang="ts">
  import { useFont } from '#fonty'

  useFont([
    {
      src: '/fonts/AspektaVF.woff2',
      family: 'Aspekta Variable',
      weight: '100 900',
      class: 'font-aspekta'
    }
  ])
</script>

useFont

The function accepts an array of objects that specifies local font sources.

Each object is treated as a separate block of rules. See types.

preload

• Type: boolean
• Default: true

Specifies the preload links.

{
  preload: true
}

src

• Type: string
• Required: true

Specifies path to the font file.

{
  src: '/path/to/font.woff2'
}

family

• Type: string
• Required: true

Defines the font family name.

{
  family: 'Family Name'
}

fallback

• Type: string[]
• Default: undefined

Defines the font family fallback.

{
  fallback: ['sans-serif'] // or ['"Arial"', 'Helvetica', 'sans-serif']
}

weight

• Type: string
• Default: 400

Defines the font weight.

{
  weight: '400' // or '100 900' for variable font
}

display

• Type: string
• Default: optional

Specifies how a font face is displayed.

{
  display: 'optional'
}

style

• Type: string
• Default: normal

Defines the font style.

{
  style: 'normal'
}

class

• Type: string
• Default: undefined

Defines the global css class for the current source.

{
  class: 'my-font'
}

Example above will generate global css class:

.my-font {
  font-family: 'family-name';
}

So it can be used in templates:

<h1 class="my-font">Fonty</h1>

variable

• Type: string
• Default: undefined

Defines the global css variable for the current source.

{
  variable: 'my-font'
}

Example above will generate global css variable:

:root {
  --my-font: 'family-name';
}

So it can be used in templates:

h1 {
  font-family: var(--my-font);
}

unicode

• Type: string[]
• Default: undefined

Defines a specific range of characters to be used from the font.

{
  preload: false, // disables the preload link
  display: 'swap', // or 'fallback', 'auto' ...
  unicode: ['U+26']
}

Example above will generate:

@font-face {
  font-display: swap;
  unicode-range: U+26;
}

autoImport

• Type: boolean
• Default: false

Manages the built-in auto-import feature.

If enabled, you can use font composables across your application without explicitly importing them.

// nuxt.config.ts

{
  fonty: {
    autoImport: true
  }
}

Support

This is a free and open source project available to everyone.

If you like it, star the repo to show your support.

License

Developed in Croatia 🇭🇷

MIT License

© Ivo Dolenc