Skip to content

The sans font family is incorrectly generated on the html rule when using fontFeatureSettings #9666

@xt0rted

Description

@xt0rted

What version of Tailwind CSS are you using?

3.2.1

What build tool (or framework if it abstracts the build tool) are you using?

What version of Node.js are you using?

  • 18.12.0
  • 19.0.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/IOqcJC9U7G

Describe your issue

If you try to use fontFeatureSettings on the sans font family then the value added to the html rule results in the following which places Inter at the end of the list instead of the beginning, and instead of font-feature-settings you get [object Object] at the very end of the font list:

html {
  font-family: ui-sans-serif,system-ui,-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", Inter, [object Object];
}

.font-sans {
  font-family: ui-sans-serif,system-ui,-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", Inter, [object Object];
}

If you adjust the font family to be a string instead of string array then the font-family is correctly set on the html rule, but there's no font-feature-settings. The .font-sans rule does include the extra settings though.

This issue does not seem to happen with a custom font family class such as the .font-inter version in the example.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions