npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

spark-html-font

v1.0.0

Published

Font loading optimizer for spark-html sites — @font-face + preload + size-adjusted fallbacks in one config, no FOUT, no layout shift. Zero dependencies.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

wilkinnovowilkinnovo

Keywords

spark-htmlfontsfont-displaypreloadclslayout-shiftbun

Readme

⚡ spark-html-font

Font loading optimizer for spark-html sites — configure every font once, get the whole loading story: correct @font-face + font-display, preload links, and a size-adjusted fallback face so the swap doesn't shift the layout. Zero dependencies.

// spark.config.js — bake into every built page
import prerender from 'spark-prerender/bun';
import font from 'spark-html-font/bun';

export default {
  pipeline: [prerender(), font({
    fonts: [
      { family: 'Inter', src: '/fonts/inter-var.woff2', weight: '100 900' },
      { family: 'Fira Code', google: true, weights: [400, 700] },
    ],
  })],
};
body { font-family: var(--font-inter); }
code { font-family: var(--font-fira-code); }

What lands in <head> (before </head>, on every built page):

  • <link rel="preload" as="font"> per self-hosted file — the fetch starts with the HTML;
  • an inline <style> with the @font-face rules (font-display: swap by default) plus an "Inter Fallback" face — local("Arial") with size-adjust / ascent-override / descent-override — so text set in the fallback occupies the same space as the real font: no layout shift on swap;
  • for Google fonts: preconnect to both Google hosts + the css2 stylesheet URL (no build-time network);
  • a --font-<slug> CSS var per family with the full stack ("Inter", "Inter Fallback", system-ui, sans-serif).

Built-in approximate fallback metrics ship for popular families (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Source Sans Pro); pass metrics: { sizeAdjust, ascent, descent, lineGap } for anything else, or adjust: false to skip the fallback face.

Runtime form

No build step? Inject the same tags from main.js:

import { fonts } from 'spark-html-font';
fonts({ fonts: [{ family: 'Inter', src: '/fonts/inter-var.woff2' }] });

Idempotent; returns a stop() that removes the tags.

Install

bun add -d spark-html-font

Options

| Option (per font) | Meaning | |--------|---------| | family | The font-family name. | | src | Self-hosted file(s); format sniffed from the extension. | | google: true | Google-hosted — emits preconnect + css2 stylesheet instead. | | weight / weights | 400, "100 900" (variable), or [400, 700] for Google. | | display | font-display strategy, default swap. | | metrics / adjust / adjustFrom | Fallback-face tuning (see above). | | preload | Per-font preload toggle; also a top-level preload for all. |

Top-level: fallback — generic families appended to every var stack (default ['system-ui', 'sans-serif']).

The Spark family

Small, single-purpose packages that share one philosophy: no compiler, no virtual DOM, no build step required — built for humans who love hand-writing their web apps. Add only what you use.

| Package | What it does | |---|---| | spark-html | The runtime — components, reactivity, stores, forms, scoped styles. ~14.4 kB gzip, 0 deps. | | spark-html-bun | Dev server, bundler & preview on Bun — scoped HMR, no-build dev, post-build pipeline. | | spark-html-router | <template route> routing — nested routes/layouts, route.query, active links. | | spark-html-theme | Dark/light/system theming in one line — persisted, no flash. | | spark-html-head | Reactive <title>/<meta> per route + a head store. | | spark-html-motion | Enter/leave transitions on if/each blocks — transition="fade|slide|scale". | | spark-html-devtools | In-page devtools — live stores, component tree, patch activity. | | spark-html-query | Declarative async data — a self-fetching store (loading/error/data/refetch). | | spark-html-persist | Persist stores to localStorage/sessionStorage in one line. | | spark-html-websocket | A WebSocket as a reactive store — auto-reconnect, JSON, send(). | | spark-prerender | Build-time SEO prerender + sitemap/robots — no SSR server. | | spark-ssr | Full-stack SSR on Bun — the template is the backend: inferred DB, REST CRUD, auth, live updates. Precompiled + response-cached: fast by default. | | spark-html-image | Build-time image optimization — webp/avif + responsive srcset, zero config. | | spark-html-font | Font loading optimizer — preload + size-adjusted fallbacks, no FOUT. | | spark-html-manifest | PWA manifest + icons + head tags (and optional service worker) from one config. | | spark-html-offline | Offline URL imports — a service worker that caches CDN components. | | spark-html-sri | Subresource Integrity — hash + verify assets and remote components. | | create-spark-html-app | Scaffold a spark-html app in one command. | | prettier-plugin-spark | Prettier for components — formats <script>/<style>, markup stays byte-for-byte. | | spark-html-language-server | LSP — diagnostics, go-to-definition, prop autocomplete, hover docs. |