Skip to content

[fontless] support selecting preloaded fonts by subsets #649

@hi-ogawa

Description

@hi-ogawa

🆒 Your use case

With #648, it supports adding preload links to html, but I noticed the current preload font selection based on meta.priority has an issue since there are often multiple fonts with meta.priority: 0. In the example added in #648, it shows "latin" subset of "Poppins" font is not preloaded and it's still downloaded through css, which causes network waterfall.

🆕 The solution you'd like

Fontless should support selecting preload fonts based on subsets by extending current preload: boolean type to preload: boolean | string[].

fontless({
  defaults: {
    preload: ["latin"], // default
  },
  families: [
    { name: "Inter", preload: ["latin"] }, // override per font
  ]
})

Currently subset information is not available. I made a PR on unifont to expose meta.subset for this purpose unjs/unifont#248

🔍 Alternatives you've considered

No response

ℹ️ Additional info

Next.js and Astro uses subsets as an only way to select preload fonts:

import { Inter } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [
      {
        name: "Inter",
        cssVariable: "--font-inter",
        provider: fontProviders.fontsource(),
        ...
        subsets: ["cyrillic"],
      },

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions