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.

Sign up for GitHub

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

Jump to bottom

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

Open
Farnsi opened this issue May 21, 2023 · 4 comments
Open

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

Farnsi opened this issue May 21, 2023 · 4 comments
Labels
bug Something isn't working

Comments

@Farnsi
Copy link

Farnsi commented May 21, 2023

Demo URL

No response

What happened?

I can not find anywhere the following @font-face-code in the generated files:

unplugin-fonts/src/loaders/custom.ts

Lines 210 to 218 in 941d019

return [
'@font-face {',
` font-family: '${face.name}';`,
` src: ${[srcs, locals].filter(Boolean).join(',')};`,
` font-weight: ${face.weight};`,
` font-style: ${face.style};`,
` font-display: ${face.display};`,
'}',
].join('\n')

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 Farnsi added the bug Something isn't working label May 21, 2023
@cssninjastudio
Copy link

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

@adamoster
Copy link

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

@dantagg
Copy link

dantagg commented Sep 22, 2023

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.

@alivadjid
Copy link

Try to declareunfonts.css in client.d.ts and import it in main.ts

client.d.ts

declare module 'unfonts.css' {
  const content: string;
  export default content;
}

main.ts

import 'unfonts.css';

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

No branches or pull requests
4 participants
@dantagg @Farnsi @adamoster @alivadjid