Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jsve opened this issue Nov 3, 2023 · 3 comments
Open

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

jsve opened this issue Nov 3, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@jsve
Copy link

jsve commented Nov 3, 2023

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 jsve added the bug Something isn't working label Nov 3, 2023
@jlarmstrongiv
Copy link

jlarmstrongiv commented Dec 21, 2023

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

@phaberest
Copy link

phaberest commented Jan 25, 2024

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

@macx
Copy link

macx commented Feb 29, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants