custom font with tailwindcss is not displayed on website

[nsursock]

I used to run critical on a website without a custom font. I use tailwindcss and I added a font using @import. Since then, it seems the critical task ignores the font and the website displays a system font instead of the custom one.
Here's my task:

task('critical', async function (cb) {
  critical.generate({
    inline: true,
    base: 'dist/',
    src: 'index.html',
    css: ['assets/main.bundle.css'],
    dimensions: [
      {
        width: 320,
        height: 480,
      },
      {
        width: 375,
        height: 812,
      },
      {
        width: 768,
        height: 1024,
      },
      {
        width: 1280,
        height: 960,
      },
    ],
    target: {
      // css: 'static/css/crit.bundle.css',
      html: 'index.html',
      uncritical: 'static/css/rest.bundle.min.css',
    },
    extract: false,
    ignore: {
      atrule: ['@font-face', '@import'],
    },
  })
})```

[bezoerb]

Hey @nsursock,
can you post a link to website so i can take a look at the problem?

[nsursock]

Of course. You can checkout this repo : https://github.com/nsursock/webdev-frontend
Then you can issue this command: yarn build && gulp build and then npx serve dist.
To check the website functioning correctly: yarn build && gulp minify and npx serve dist

[nsursock]

I have another question. Dunno if it's the place: I want to generate critical for each page of my website (pages and posts type). How can I do this?

[nsursock]

Ok I had a problem with the ignore. I removed it and the font appears correctly.

[bezoerb]

seems like this one is resolved :)
About the "generate critical for each page" question:
Looks like there's a plugin for eleventy (saw that you're using this on your repo) which generates critical css for each page.
Just answered an issue regarding this #528

Maybe this helps :)

[nsursock]

sorry I have to reopen this
I'm using critical on my landing page and there are items that do not display fine. it seems the css is missing notably an input field that is not styled and a theme menu that lacks borders... can send screenshot if you want.
I'd really like to make this work