Adding font-family on body does not override, maybe specificity ?

[iangregsondev]

Hi,

Can anyone help ?

I tried adding this to the body in my global.css file, --font-outfit is valid,

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-outfit); 
}

color and background changes... but font-family doesn't.

If I put it on the HTML tag, then it does.

I am guessing its specificity, I noticed this when only applied to the body

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

by checking the computed, I think htm, :host is a higher specificity than just body ?

I am trying to understand where it comes from.

Is there a CSS reset on tailwind that does this ?

After understanding it :-)

What is the recommended way of overriding the font-family ?

Thanks in advance

Ian

[wongjn]

Seems like it should work, as per this Tailwind Play. Consider providing a reproduction showcasing it not working.

[iangregsondev]

I did find where it was being defined, its in the preflight.css

tailwindcss/packages/tailwindcss/preflight.css

Line 29 in 9b15a5c

:host {

I believe that

html,:host {}

has more specificity than

body{}

and font-family is inherited.

Or maybe I am wrong.

Also I was looking at the computed font-family for your tailwind play that you sent, and I don't see the outfit font.

I am probably not looking in the right place or something.

[wongjn]

I believe that

html,:host {}

has more specificity than

body{}

and font-family is inherited.

html,:host does indeed has more specificity than body, but you override the font-family with a body rule anyway.

Also I was looking at the computed font-family for your tailwind play that you sent, and I don't see the outfit font.

Works for me at least:

[iangregsondev]

Thanks,

after looking closer, i had some weird comments in my CSS that had some older font-family in there, doh!

My bad..

Thank you for testing your end...

Its now working.