feat(web-fonts): add local font support to web font preset

[onmax]

🏗️ WIP

Solves #3646

[netlify]

❌ Deploy Preview for unocss failed.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3292bd9
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/6617fa97affad40008683768

[onmax]

I need to write the new fonts into the assets folder but I am not sure how to get that relative path from the 'virtual:uno.css'

Any ideas?

[onmax]

When this PR is done I will revert this changes. Just for testing!

[onmax]

I have no idea how to get the path from the root project in order to write the fonts to the assets folder.

I don't even know if this is the right solution...

Or should I use a virtual Vite file instead? I am blocked now 😓

Any ideas are much welcomed! Thanks!

[userquin]

I guess you will need to add an option to the preset (where to download the fonts?, by default ${process.cwd()}/public, sveltekit should be ${process.cwd()}/static: it should be a string or a function) and also a plugin to serve fonts: you also need to expose that option in the context, and so the plugin can resolve it. Check preset icons, we also have some option in the preset to resolve local collections.

I don't see any protection when running in the browser, you should protect the preset: check preset-icons

EDIT: check also SVG sprites PR, you can move the logic to the plugin since we don't have that feature in the browser.

About using the CLI, you can expose some helper function (in the preset) with the logic, this way, Vite, WebPack, any meta framework and the CLI can use it.

[userquin]

I'll try to add initial logic for vite (with small preset changes), later we can add webpack and CLI support (CLI will not require any integration since it is not a bundler, we only need the download logic): we need to add support for dev server to download the fonts

[userquin]

@onmax shouldn't the css also be saved locally?

[onmax]

@onmax shouldn't the css also be saved locally?

Why? Don't we want to let UnoCSS handle the CSS for us?

Once you have the fonts downloaded in your machine, the preset will no longer make requests to the font provider but we will always update the CSS url() imports to link to the local font file

Yes. You are right. I have to download the CSS locally.

This is what the downloadLocally: true option will do:

1. Check if we have the assets/fonts.css and all the fonts have been downloaded in assets/fonts
   1.1 If both the CSS file and the fonts already exists, then we just read the content of the CSS file and return it to the getCSS function.
   1.2 Otherwise continue.
2. Download the CSS from the font provider
3. Find all external urls of the fonts
4. Download the fonts and store them in assets/fonts
5. Replace the urls with the new local urls
6. Write the CSS to the assets/fonts.css

[onmax]

#3723 3723