Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Out of order custom font family names

See original GitHub issue

WindiCSS version:

“windicss”: “^3.1.3”
“vite-plugin-windicss”: “^1.0.4”

I have implemented a custom font as follows:

index.html:

<head>
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
</head

windi.config.ts :

import defaultTheme from 'windicss/defaultTheme'

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  attributify: true,
}

App.css:

html {
  @apply font-sans;
}

Unfortunately, the browser doesn’t pick up the custom font, ‘Inter var’. Upon inspecting the loaded App.css file via the network tab, I can see the Inter var font was inserted successfully but at the wrong location. See partial output:

...
const css = "html {\n  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 var\",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\";\n}"
...

Issue Analytics

State:
Created 2 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

3reactions

antfucommented, Jun 22, 2021

Looks like it’s a bug. Before the fix, if you want to use extend here is a workaround:

import defaultTheme from 'windicss/defaultTheme'

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Inter var"', ...defaultTheme.fontFamily.sans].join(','),
      },
    },
  },
  attributify: true,
}

1reaction

armenrcommented, Jul 26, 2021

Thank you @HerrBertling !!

Top Results From Across the Web

font-family - CSS: Cascading Style Sheets - MDN Web Docs

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected ...

How To Load and Use Custom Fonts with CSS | DigitalOcean

In this tutorial, you will try out examples of loading fonts onto your website. You will use the font stack, a rank ordering...

How do I get the font name from an otf or ttf file? - Stack Overflow

In the debug output, look for your new font's 'family' and 'font' name. Pass whatever is displayed as the 'font' name corresponding to...

CSS Font Family List - TutorialBrain

SANS-SERIF FONT FAMILY ; Arial. Arial. Arial Black. Arial narrow. Arial Rounded MT Bold ; Helvetica. Helvetica ; Verdana. Verdana ; Calibri. Calibri....

Adding a Custom Font to Your App - Apple Developer

Use Your Custom Font in Source Code · for family in UIFont.familyNames.sorted() { · let names = UIFont.fontNames(forFamilyName: family) · print("Family: \(family) ...