Skip to content

[fontless] support preload for ssr app #650

@hi-ogawa

Description

@hi-ogawa

🆒 Your use case

#648 will add preload links support for a standard SPA app by implementing transformIndexHtml. However, transformIndexHtml is often not integrated in ssr frameworks. It would be nice if there's a framework agnostic way to provide necessary information about preload fonts, so users can renders the links manually at least.

🆕 The solution you'd like

As I initially mentioned in #631, I think the most general way to provide such information is via virtual modules. One rough suggestion is something like:

import fontUrls from "fontless:font-urls"

const head = `<link rel="preload" as="font" href="${fontUrls[0]}" >`
... render head during ssr ...

However, how to actually implement such virtual module might need to take into account meta framework's build system, which can be different each other. This is to be investigated.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

I think @nuxt/font is using own manifest system to setup preload links https://github.com/nuxt/fonts/blob/e7f537a0357896d34be9c17031b3178fb4e79042/src/module.ts#L128-L132.

Astro is using virtual module internally to expose font metadata including preloaded fonts to ssr, so this might be similar to the solution I suggest above.

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