Tailwindcss: Feature Proposal: Auto-generate @font-face

[TobiasFroberg]

My thought is to avoid having to manually import fonts. When specifying the weights and src for a font Tailwind could automatically import it for us in the generated css.

Maybe something like this?

  fonts: {
    'sans': [
      'Avenir Next': [
        {
          weight: '800',
          src: '/webfonts/AvenirNext/AvenirNextHeavy.ttf',
        },
        {
          weight: '700',
          src: '/webfonts/AvenirNext/AvenirNextBold.ttf',
        },
      ],
      'system-ui',
      'BlinkMacSystemFont',
    ],

[tlgreg]

I think it's a good idea.
Just one thing, the above syntax is not valid, so it would need to be wrapped into an object literal:

  fonts: {
    'sans': [
      {
        '"Avenir Next"': [
          {
            weight: '800',
            src: '/webfonts/AvenirNext/AvenirNextHeavy.ttf',
          },
          {
            weight: '700',
            src: '/webfonts/AvenirNext/AvenirNextBold.ttf',
          },
        ],
      },
      'system-ui',
      'BlinkMacSystemFont',
    ],

[natecox]

It'd probably be better to have tailwind natively use https://github.com/jonathantneal/postcss-font-magician to handle this.

In the mean time, it's pretty easy to set up font magician for yourself, which will handle all the heavy labor for you.

[milandimun]

@TobiasFroberg is it still open? I could work on this.

[TobiasFroberg]

@milandimun I'd recommend asking @adamwathan if he'd want this in core tailwind or if he thinks it suits better as a plugin or something.

[adamwathan]

Still not sure if I want to add this or not at the moment, I think there are a few other features I would want to add first to make the implementation of this cleaner. I likely wouldn't accept any PRs for this right now because the implementation would sort of suck, but will leave this request open 👍

[TheDutchCoder]

It'd probably be better to have tailwind natively use https://github.com/jonathantneal/postcss-font-magician to handle this.

In the mean time, it's pretty easy to set up font magician for yourself, which will handle all the heavy labor for you.

I agree with this, though self-hosted fonts currently don't work, which is a shame, but there's a bit of a work-around you can use by using a webpack file loader and a custom Font Magician declaration:

In postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.js'),
    require('postcss-font-magician')({
      custom: {
        'Your Font': {
          variants: {
            normal: {
              300: {
                url: {
                  woff: 'fonts/YourFont.woff',
                },
              },
              400: {
                url: {
                  woff: 'fonts/YourFont.woff',
                },
              },
              600: {
                url: {
                  woff: 'fonts/YourFont.woff',
                },
              },
            },
            italic: {
              400: {
                url: {
                  woff: 'fonts/YourFont.woff',
                },
              },
            },
          },
        },
      },
    }),
  ],
}

It's quite verbose, but it works well.

[adamwathan]

Going to close this with no concrete plans to implement right now, but you could definitely create a plugin for this that uses the new addBase plugin API to inject the font face declarations.