https://github.com/peterekjs/vite-plugin-font

Vite plugin for simple use of custom fonts
https://github.com/peterekjs/vite-plugin-font

Last synced: 13 days ago
JSON representation

Vite plugin for simple use of custom fonts

• Host: GitHub
• URL: https://github.com/peterekjs/vite-plugin-font
• Owner: peterekjs
• License: mit
• Created: 2023-04-21T18:43:10.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-01-05T01:55:26.000Z (about 1 month ago)
• Last Synced: 2025-01-15T20:46:51.199Z (26 days ago)
• Language: TypeScript
• Size: 129 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @peterek/vite-plugin-font

Vite plugin for simple use of custom fonts

## Use in [Vite config](https://vitejs.dev/config/) file

### Minimal configuration

```js

import { join } from 'node:path'

import { font } from '@peterek/vite-plugin-font'

import { defineConfig } from 'vite'

export default defineConfig({

  plugins: [

    font({

      font: {

        name: 'Roboto',

        src: join(__dirname, 'assets/Roboto/*.ttf'),

      },

    })

  ]

})

```

### Full configuration

```js

import { join } from 'node:path'

import { font } from '@peterek/vite-plugin-font'

import { defineConfig } from 'vite'

export default defineConfig({

  plugins: [

    font({

      // Base directory for the font files to be accessed from (optional).

      // Default: `UserConfig['base'] + 'fonts'`

      base: '/',

      // Font definitons. It can be defined as single object or as list of configurations

      font: [

        {

          // Font name to be referenced by css rule e.g.: `font-family: Roboto;`

          name: 'Roboto',

          // Absolute path to the font sources using glob pattern

          src: join(__dirname, 'assets/Roboto/*.ttf'),

          // The `font-display` descriptor used for each font-face (optional). Default: 'auto'

          display: 'auto',

        },

      ],

      // Location where inject link tags to (optional). Default: 'head-prepend'

      injectLinkTo: 'head-prepend',

      // Location where inject link tags to (optional). Default: 'head'

      injectStyleTo: 'head',

      // Prefetch fonts. If true, takes precedence over preload option (optional). Default: `false`

      prefetch: false,

      // Preload fonts (optional). Default: `false`

      preload: true,

    })

  ]

})

```