unplugin-fonts icon indicating copy to clipboard operation
unplugin-fonts copied to clipboard

[Bug]: Issues with astro (example and Astro 3)

Open jsve opened this issue 2 years ago • 6 comments

Demo URL

No response

What happened?

When using Astro 3 with fontsource (version 4), fonts are not included in the bundled css.

The component does not seem to be recognised as an Astro component:

Screenshot 2023-11-03 at 19 47 24

It does seem like the component is just ignored by Astro.

There is also a weird behaviour with a []unfonts.css that is trying to be included as a style tag (see below). When reading the documentation I was under the impression that when using fontsource, no font-face tags or other CSS would be bundled...

Screenshot 2023-11-03 at 19 47 51

... however, i see the same issue when running your examples/astro-project:

Screenshot 2023-11-03 at 22 41 17

To me, this seems like 3 related issues:

  1. no link tags are included when using fontsource with your Astro setup
  2. a non-existing css file is attempted to be included when using fontsource and your Astro setup
  3. project does not support Astro 3 (alternatively, documentation does not state that project does not support Astro 3)

Reproduction steps

for issues 1 and 2:
1. run the example Astro project
2. inspect in the browser
3. you will see no link tag to the font file
4. you sill see a style tag with [missing symbol]unfonts.css
5. go to network tab
6. see failed request to same unfonts.css

for issue 3:
1. update example Astro project to Astro 3. Alternatively, try to use this package in an Astro 3 project
2. try to build project and Astro / Vite / typescript should complain about the missing component
2. observe fonts not being applied or loaded
3. verify that the bundled css includes no font-face tags
4. further verify that no requests are tried for the used font
4.

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

jsve avatar Nov 03 '23 22:11 jsve

import "unfonts.css"; also 404s for me with Astro

I use a @ts-expect-error for <Unfont />

EDIT: after trying different workarounds, I decided to give up trying to use unplugin-fonts with Astro

jlarmstrongiv avatar Dec 21 '23 22:12 jlarmstrongiv

I'm afraid I'm experiencing the same. Did anyone find a workaround? Might as well be something missing in the tsconfig

EDIT: scratched my head quite a lot but ended up giving up and found https://github.com/Gamesome-ab/astro-font to be a good working alternative for my needs

phaberest avatar Jan 25 '24 00:01 phaberest

It's the same on my installation. Got an 404.

macx avatar Feb 29 '24 09:02 macx