histoire-dev / histoire-dev/histoire

histoire is overriding custom font

Open
#754 0 comments 0 reactions 0 assignees View on GitHub
to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

When using `histoire build` we don't see our custom font. It seems to be overwritten by this rule

```
html {
font-size: 1rem;
font-family: 'Noto Sans Display', system-ui, sans-serif;
}
```

This does not happen when we use `histoire dev`.

We are using Vue3, Shadcn, tailwind.

We have tried various approaches to fix it, including importing css from within `histoire.setup.ts`.

Any ideas on how to solve this?

### Reproduction

This only happens using `histoire build` and not `histoire dev`.
Therefore I am not sure how to provide a reproduction.

### System Info

```shell
tailwindcss: ^3.4.3,
histoire: ^0.17.17,
vite: ^5.2.0"
Vue 3
```

### Used Package Manager

npm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported difference between `histoire build` and `histoire dev` with the listed Histoire, Vite, Tailwind CSS, and Vue 3 versions. Inspect the generated build CSS for the `html` font rule; done means the custom font remains effective in the production build without breaking the development behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.