Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

unplugin-fonts

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

unplugin-fonts

Universal Webfont loader

  • 1.1.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
96K
increased by42.66%
Maintainers
1
Weekly downloads
 
Created
Source

unplugin-fonts

㊗️ Universal Webfont loader - Unfonts

npm

This plugin goes beyond just generating font-face rules - it also takes care of link preload and prefetch, optimizing font loading for a faster and more efficient user experience.

Unfonts currently supports popular font providers like Typekit, Google Fonts, and Fontsource, as well as custom fonts. This gives you the flexibility to choose from a vast range of fonts and seamlessly integrate them into your projects.

With Unfonts, you no longer have to manually manage font files and font-face rules, or worry about slow loading times. Our package does all the heavy lifting for you, so you can focus on creating amazing content with ease.

View configuration:

Install

npm i --save-dev unplugin-fonts # pnpm add -D unplugin-fonts
Vite
// vite.config.ts
import Unfonts from 'unplugin-fonts/vite'

export default defineConfig({
  plugins: [
    Unfonts({ /* options */ }),
  ],
})

Example: examples/vite


Webpack

Warning
Not implemented yet

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-fonts/webpack')({ /* options */ })
  ]
}


Nuxt
// nuxt.config.js
export default {
  modules: [
    ['unplugin-fonts/nuxt'],
  ],
  unfonts: {
    /* options */
  }
}

Example: examples/nuxt


SvelteKit
// vite.config.ts
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import Unfonts from 'unplugin-fonts/vite'

export default defineConfig({
  plugins: [
    sveltekit(),
    Unfonts({
      /* options */
    })
  ]
})

Example: examples/sveltekit


Astro
// astro.config.js
import { defineConfig } from 'astro/config'
import Unfonts from 'unplugin-fonts/astro'

export default defineConfig({
  integrations: [
    Unfonts({
      /* options */
    })
  ]
})
---
// src/pages/index.astro
import Unfont from 'unplugin-fonts/astro/component.astro';
---

<html>
  <head>
    <Unfont />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Example: examples/astro



Migrating from vite-plugin-fonts
// vite.config.ts
-import { VitePluginFonts } from 'vite-plugin-fonts'
+import Unfonts from 'unplugin-fonts/vite'

export default defineConfig({
  plugins: [
-    VitePluginFonts({ 
+    Unfonts({ 
      /* options */ 
    }),
  ],
})
// main.ts
-import 'virtual:fonts.css'
+import 'unfonts.css'


Import generated @font-rules CSS

Note
Required if using custom or fontsource providers

import 'unfonts.css'

Providers

Typekit

Load fonts from Typekit.

Unfonts({
  // Typekit API
  typekit: {
    /**
     * Typekit project id
     */
    id: '<projectId>',

    /**
     * enable non-blocking renderer
     *   <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
     * default: true
     */
    defer: true,

    /**
     * define where the font load tags should be inserted
     * default: 'head-prepend'
     *   values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
     */
    injectTo: 'head-prepend',
  },
})

Google Fonts

Load fonts from Google Fonts.

Unfonts({
  // Google Fonts API V2
  google: {
    /**
     * enable preconnect link injection
     *   <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     * default: true
     */
    preconnect: false,

    /**
     * values: auto, block, swap(default), fallback, optional
     * default: 'swap'
     */
    display: 'block',

    /**
     * define which characters to load
     * default: undefined (load all characters)
     */
    text: 'ViteAwsom',

    /**
     * define where the font load tags should be inserted
     * default: 'head-prepend'
     *   values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
     */
    injectTo: 'head-prepend',

    /**
     * Fonts families lists
     */
    families: [
      // families can be either strings (only regular 400 will be loaded)
      'Source Sans Pro',

      // or objects
      {
        /**
         * Family name (required)
         */
        name: 'Roboto',

        /**
         * Family styles
         */
        styles: 'ital,wght@0,400;1,200',

        /**
         * enable non-blocking renderer
         *   <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
         * default: true
         */
        defer: true,
      },
    ],
  },
})

Custom Fonts

Load custom fonts from files.

Unfonts({
  // Custom fonts.
  custom: {
    /**
     * Fonts families lists
     */
    families: [{
      /**
       * Name of the font family.
       */
      name: 'Roboto',
      /**
       * Local name of the font. Used to add `src: local()` to `@font-rule`.
       */
      local: 'Roboto',
      /**
       * Regex(es) of font files to import. The names of the files will
       * predicate the `font-style` and `font-weight` values of the `@font-rule`'s.
       */
      src: './src/assets/fonts/*.ttf',

      /**
       * This function allow you to transform the font object before it is used
       * to generate the `@font-rule` and head tags.
       */
      transform(font) {
        if (font.basename === 'Roboto-Bold') {
          // update the font weight
          font.weight = 700
        }

        // we can also return null to skip the font
        return font
      }
    }],

    /**
     * Defines the default `font-display` value used for the generated
     * `@font-rule` classes.
     */
    display: 'auto',

    /**
     * Using `<link rel="preload">` will trigger a request for the WebFont
     * early in the critical rendering path, without having to wait for the
     * CSSOM to be created.
     */
    preload: true,

    /**
     * Using `<link rel="prefetch">` is intended for prefetching resources
     * that will be used in the next navigation/page load
     * (e.g. when you go to the next page)
     *
     * Note: this can not be used with `preload`
     */
    prefetch: false,

    /**
     * define where the font load tags should be inserted
     * default: 'head-prepend'
     *   values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
     */
    injectTo: 'head-prepend',
  },

})

Fontsource

Load fonts from Fontsource packages.

Note You will need to install @fontsource/<font> packages.

Unfonts({
  // Fontsource API
  fontsource: {
    /**
     * Fonts families lists
     */
    families: [
      // families can be either strings (load default font set)
      // Require the `@fontsource/abeezee` package to be installed.
      'ABeeZee',
      'Inter Variable', // Require the `@fontsource-variable/inter` package to be installed.
      {
        /**
         * Name of the font family.
         * Require the `@fontsource/roboto` package to be installed.
         */
        name: 'Roboto',
        /**
         * Load only a subset of the font family.
         */
        weights: [400, 700],
        /**
         * Restrict the font styles to load.
         */
        styles: ['italic', 'normal'],
        /**
         * Use another font subset.
         */
        subset: 'latin-ext',
      },
      {
        /**
         * Name of the font family.
         * Require the `@fontsource-variable/cabin` package to be installed.
         */
        name: 'Cabin',
        /**
         * When using variable fonts, you can choose which axes to load.
         */
        variable: {
          wght: true,
          slnt: true,
          ital: true,
        },
      },
    ],
  },
})

Typescript Definitions

{
  "compilerOptions": {
    "types": ["unplugin-fonts/client"]
  }
}

or

// declaration.d.ts
/// <reference types="unplugin-fonts/client" />

Resources

Keywords

FAQs

Package last updated on 22 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc