Yep, should be OK.

If you want one class that bundles both the family and the weight, @utility is the right tool for that.

@utility font-display {
  font-family: "Example";
  font-weight: 700;
}

That should not break any Tailwind internals. It just means font-display is now your own custom utility instead of a theme-driven --font-* token.

The distinction is:

• --font-* theme variables drive font-family utilities
• font weight is handled separately

So if you want to stay inside Tailwind’s theme model, define --font-display and pair it with font-bold / font-[700].
If you want a single combined utility, your @utility font-display approach is the cleanest option.

Your @utility approach works but has a subtle gotcha: it creates a completely custom utility that replaces the theme-generated font-display rather than extending it. This means font-display will no longer participate in Tailwind's font-family system — things like the font-* modifier precedence and any tooling that inspects theme values won't see it as a font-family utility.

A cleaner approach that keeps Tailwind's internals happy is to define the font in the theme and then layer on the weight using a base style or a custom utility that composes them:

Option 1: Base layer (recommended if this font always uses weight 700)

@theme {
  --font-display: "Example";
}

@layer base {
  .font-display {
    font-weight: 700;
  }
}

This keeps the theme variable intact, so font-display behaves like any other Tailwind font utility, and you get font-weight: 700 automatically whenever it's used. You can still override with font-normal or font-bold etc. in your markup since the utilities layer has higher precedence than base.

Option 2: Your @utility approach (if you prefer explicit control)

Your approach does work fine in practice. It won't break anything at runtime — Tailwind will generate the utility and it'll apply both properties. Just be aware that since you're shadowing the namespace, the theme variable --font-display becomes unused. You could remove it to avoid confusion:

@utility font-display {
  font-family: "Example";
  font-weight: 700;
}

Either way, you won't run into issues. I'd lean toward Option 1 for cleanliness.