/vite-plugin-font-optimization

Automatically inline font CSS to improvement FCP and LCP

Primary LanguageTypeScriptMIT LicenseMIT

Vite Font Optimization

Vite Font Optimization will automatically inline font CSS to improvement First Contentful Paint (FCP) and Largest Contentful Paint (LCP). For example:

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>

// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
  @font-face{font-family:'Inter';font-style:normal...
</style>

Installation

Install the plugin with npm install vite-plugin-font-optimization or yarn add vite-plugin-font-optimization

Usage

Add the plugin to vite.config.ts or vite.config.js.

import fontOptimizationPlugin from 'vite-plugin-font-optimization'

export default {
  plugins: [fontOptimizationPlugin()]
}

Vite Font Optimization currently supports Google Fonts and Typekit. If you want to support additional fonts, you can set up providers like this below:

import fontOptimizationPlugin from 'vite-plugin-font-optimization'

export default {
  plugins: [fontOptimizationPlugin({
    providers: ['https://fontlibrary.org//face/']
  })]
}

Tests

Tests are using jest, to run the tests use:

$ npm run test