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

Published 20 hours ago • verified publisher icon cssninjaStudio

[Bug]: Type custom did not generate @font-face

Open Farnsi opened this issue 1 year ago • 4 comments

Demo URL

No response

What happened?

I can not find anywhere the following @font-face-code in the generated files: https://github.com/cssninjaStudio/unplugin-fonts/blob/941d0196992fc7fd0dc6515cea1d15d068f9c66b/src/loaders/custom.ts#L210-L218

vite-config is in a subdir (config/vite.config.ts) The assets are in assets/common but will be copied in production to dist/-root folder, that is why i use transform() to correct the path.

unplugin-fonts config:

//...
      custom: {
        families: [
          {
            name: 'Pacifico',
            local: 'Pacifico',
            src: '../assets/common/fonts/pacifico/*.ttf',
            transform(font) {
              // correct frontend path
              font.files.forEach((file) => {
                file.path = file.path.replace('assets/common/', '')
              })
console.log(JSON.stringify(font, null, 2))
              return font
            },
          },
        ],
        display: 'auto',
        preload: true,
        prefetch: false,
        injectTo: 'head-prepend',
      },

Output from console.log above

{
  "source": "../assets/common/fonts/pacifico/*.ttf",
  "name": "Pacifico",
  "basename": "Pacifico-Regular",
  "weight": 400,
  "style": "normal",
  "local": "Pacifico",
  "display": "auto",
  "files": [
    {
      "src": "/myapp/assets/common/fonts/pacifico/Pacifico-Regular.ttf",
      "path": "/fonts/pacifico/Pacifico-Regular.ttf",
      "format": "truetype",
      "ext": ".ttf"
    }
  ]
}

index.html contains

  <head>
    <script type="module" src="/@vite/client"></script>
    <link rel="preload" as="font" type="font/ttf" href="/fonts/pacifico/Pacifico-Regular.ttf" crossorigin>

The font is loaded, but it can't be displayed, cause there is no css code for @font-face.

Reproduction steps

Usa a custom font.

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

Farnsi avatar May 21 '23 13:05 Farnsi

Hello @Farnsi! Thanks for opening this issue, we will get back to you soon! Until then, feel free to join us on discord

If you love our work, please consider sponsoring us

cssninjastudio[bot] avatar May 21 '23 13:05 cssninjastudio[bot]

Try to double check the path to your fonts in assets (is the assets library under src/ and your config isn't?)

adamoster avatar Jul 02 '23 08:07 adamoster

Hi @Farnsi, I think I have run into the same problem. The font <link> items all have urls that point to fonts, but again the @font-face is not being generated.

dantagg avatar Sep 22 '23 11:09 dantagg