setting default font when tailwind fails?

Question

If I use a universal selector in conjunction with tailwind, not all the elements resort to default. I want everything to default to Impact (in case tailwind doesn't load/work). To test this, I remove the @font-face rule and refresh which shows the impact font. It seems to work for most elements, but not the div element below. The div below still goes to the arial default? Is this because i have font-NormsMedium set in the div's class? So How do I change my default font properly, in case tailwind doesn't load/work? Also, I am using svelte framework.

Update: When I remove font-NormsMedium from the div class it defaults to impact which is what I want, but why does it default to Arial when it is not removed from the div class?

INDEX.HTML

<style lang="postcss">

   * {
       font-family: Impact, sans-serif; 
     } 

   @font-face {
        font-display: block;
        font-family: NormsMedium;
        src: url(path...)
        format('woff2'),
        url(path...)
        format('woff');
        font-weight: 400;
        font-style: normal;
     }

TAILWIND.CONFIG

  module.exports = {
    theme: {
      extend: {
        fontFamily: {
                NormsBold: 'NormsBold',
                NormsMedium: 'NormsMedium',
                NormsRegular: 'NormsRegular',
            },
         },
       }

ELEMENT DOES NOT DEFAULT TO IMPACT

<div class="mt-1 mb-2 text-lg text-left font-NormsMedium line-clamp-2 ">90s Hair Now with Calista</div>

Answer 1

If Tailwind were to fail, "Impact" would be the default. The Tailwind classes you're adding to your markup would have no effect. The situation you're describing however is different: what you're seeing is the result of a font failing to load.

Your font-family rule is being applied by Tailwind, overriding "Impact" but the specified font isn't available so it uses a fallback. Font stacks allow you to determine what that fallback should be.

If you want everything to default to "Impact" if your primary font doesn't load, add it to your font stack.

fontFamily: {
    NormsBold: ['NormsBold', 'Impact', 'sans-serif'],
    NormsMedium: ['NormsMedium', 'Impact', 'sans-serif'],
    NormsRegular: ['NormsRegular', 'Impact', 'sans-serif'],
}

It's also worth setting up your font-face rules correctly so that they're all one font family with the weights working as intended.

Example:

@font-face {
    font-display: swap;
    font-family: 'Norms';
    font-style: normal;
    font-weight: 500;
    src: url(path TO MEDIUM...)
        format('woff2'),
        url(path...)
        format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Norms';
    font-style: normal;
    font-weight: 700;
    src: url(path TO BOLD...)
        format('woff2'),
        url(path...)
        format('woff');
}

/** Add as many variations as required */

Config:

fontFamily: {
    Norms: ['Norms', 'Impact', 'sans-serif'],
}