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

[jsve]

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:

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...

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

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

[jlarmstrongiv]

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]

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]

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

[MLNW]

It's a pity that it doesn't work anymore. Was excited to include it in my project but stumbled from one issue into another and then found this thread. Seems like the project is dead in the water since the end of 2023.

[mohdlatif]

same issue :(

[Pkcarreno]

I managed to make it work. For some reason in the astro integration function it injects the content in “page-ssr” mode and this, at least, does not work on a static page. I didn't do the test in case of server.

As an alternative what I did was to create my own implementation of the astro integration function and in this I changed 'page-ssr' to 'page'.

This is the code:

// ./src/lib/font.ts

import type { AstroIntegration, ViteUserConfig } from 'astro'
import unplugin from 'unplugin-fonts'
import type { Options } from 'unplugin-fonts/types'

export default function (options: Options) {
  return <AstroIntegration>{
    name: 'unplugin-fonts',
    hooks: {
      'astro:config:setup': async astro => {
        if (options?.custom) options.custom.stripPrefix = 'public/'

        astro.config.vite.plugins ||= []
        astro.config.vite.plugins.push(
          unplugin.vite(options) as ViteUserConfig['plugins']
        )

        astro.injectScript('page', 'import "unfonts.css";')
      }
    }
  }
}

And then in the astro.config.js file change the path to import the unfont integration to the newly created file.

// astro.config.js

import { defineConfig } from 'astro/config'
// import Unfonts from 'unplugin-fonts/astro'
import Unfonts from './src/lib/font'

export default defineConfig({
  integrations: [
    Unfonts({
      fontsource: {
        families: [
          {
            name: 'ABeeZee',
            weights: [400],
            styles: ['italic'],
          },
          {
            name: 'Truculenta',
            weights: [400, 700],
          },
        ],
      },
    }),
  ],
})

Once this is done, the project will generate the 'unfont.css' file and insert it correctly in the page.

The error message about the <Unfont /> component is not related to generating the 'unfont.css' file since it is virtually generated by having the astro integration in the configuration, it was just injecting it in the wrong “context”.