[typhoon] Can't change header fonts

This issue has been discussed and solved in #191. I'm on GRAV v1.7.40, Typhoon v2.4.2. Have followed the documentation but don't get it to work.

I want to change h1 and h6 to RI.woff2

Here are my files:

typography.css

[x-cloak] { display: none; }

body {
  &.debug-screens:before {
    @apply left-inherit right-0;
  }

  @apply text-gray-700;
}

.site-logo {
  img, svg {
    @apply h-full;
  }
}

.foo {
  @apply text-3xl;
}

/** Prose fixes **/

.prose {
  a {
    @apply transition duration-300 text-primary no-underline;

    &:hover {
      @apply text-primary-darker;
    }
  }

  .no-prose {
    a {
      @apply transition-none;
    }
    p {
      margin: initial;
    }
  }

  .btn, .button, a.btn, a.button {
    @apply px-4 lg:px-8 py-3 leading-6 font-medium rounded-md text-gray-100 hover:text-white bg-primary filter hover:brightness-90 transition duration-300 ease-in-out inline-flex;
  }
  & > ul > li {
    & > *:last-child {
      margin: inherit;
    }
  }
  ul > li:before {
    @apply bg-gray-500;
  }

  ol > li:before {
    @apply text-gray-500;
  }
  ul.archives > li {
    @apply pl-0;
  }
}

/** Blog sidebar **/
#sidebar {
    .sidebar-content {
        @apply mb-6;
    }
}

/** Menu open/close **/
.menu-visible {
  @apply opacity-100 block;
}

h1, h6 {
  @apply font-RI;
}

fonts.css

@font-face {
    font-family: 'RI';
    font-display: auto;
    src: url("../../fonts/RI.woff2") format("woff2");
}

@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url("../../fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
}

@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: 'Italic';
    src: url("../../fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
}

tailwind.config.js

const colors = require('tailwindcss/colors');
const path = require('path');
const process = require('process');
const dirname = process.env.PWD || process.cwd();
const normalize = (paths) => {
  return paths.map((_path) => path.normalize(`${dirname}/${_path}`));
}
module.exports = {
  content: normalize([
    '../../config/**/*.yaml',
    '../../pages/**/*.md',
    './blueprints/**/*.yaml',
    './js/**/*.js',
    './templates/**/*.twig',
    './typhoon.yaml',
    './typhoon.php',
    './available-classes.md',
    '../../plugins/sandbox-support/templates/**/*.twig',
  ]),
  theme: {
    extend: {
      inset: {
        '2': '0.5rem',
        'full': '100%',
        '1/2': '50%',
        '-1/2': '-50%',
        'inherit': 'inherit'
      },
      fontFamily: {
        sans: [
          'Inter var',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
    RI: [
      'RI',         
    ],

      },
      width: {
        'content': 'max-content',
      },
      maxHeight: {
        '0': '0',
      },
      lineHeight: {
        'tighter': '1.15',
      },
      strokeWidth: {
        '3/2': '1.5',
        '5/2': '2.5',
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: 'inherit',
            lineHeight: 'inherit',
            maxWidth: 'inherit',
            a: {
              transition: 'all 500ms',
              color: theme('colors.primary.DEFAULT'),
              '&:hover': {
                color: theme('colors.primary.darker')
              },
              textDecoration: 'none'
            },
            strong: {
              color: 'inherit'
            },
            code: {
              backgroundColor: theme('colors.gray.100'),
              color: theme('colors.indigo.600'),
              fontWeight: 'inherit'
            },
            pre: {
              backgroundColor: theme('colors.blue.100'),
              backgroundOpacity: theme('opacity-50'),
              color: theme('colors.blue.800'),
            },
          }
        }
      }),
      colors: {
        gray: colors.zinc,
        transparent: 'transparent',
        inherit: 'inherit',
        primary: {
          DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
          'lighter': 'rgb(var(--color-primary__lighter) / <alpha-value>)',
          'darker': 'rgb(var(color-primary__darker) / <alpha-value>)',
        },
      },
    },
    columnCount: [ 1, 2, 3, 4 ],
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('tailwindcss-multi-column')(),
    require('tailwindcss-debug-screens'),
  ],
  darkMode: 'class',
}

Compiled CSS with

npm run build

npm output

> postcss8-tailwind@1.0.0 build
> NODE_ENV=production tailwindcss -i ./css/site.css -o ./build/css/site.css --postcss --minify

   tailwindcss 1.9.6

   Usage:
      tailwind <command> [options]

   Commands:
      help [command]            More information about the command.
      init [file]               Creates Tailwind config file. Default: tailwind.config.js
      build <file> [options]    Compiles Tailwind CSS file.

Also tried different versions of the font.

Probably missing something. Also, I'm not sure if the npm output is an error or not. I have no experience with npm.

What am I doing wrong?

getgrav / grav-premium-issues

[typhoon] Can't change header fonts #363