Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Out of order custom font family names #363

Closed
brandiqa opened this issue Jun 21, 2021 · 7 comments
Closed

Out of order custom font family names #363

brandiqa opened this issue Jun 21, 2021 · 7 comments
Labels
bug Something isn't working

Comments

@brandiqa
Copy link
Contributor

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}"
...
@schelmo
Copy link
Contributor

schelmo commented Jun 22, 2021 •
edited

do not use it in theme.extend instead do:

export default {
  theme: {
    fontFamily: {
      // uncomment if you still need mono and serif
      //...defaultTheme.fontFamily,
      sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
    },
  },
  attributify: true,
}

@brandiqa
Copy link
Contributor Author

Yap. Removing extend works. Fonts are displayed in the correct order.

@antfu antfu added the bug Something isn't working label Jun 22, 2021
@antfu
Copy link
Member

antfu commented 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,
}

@brandiqa
Copy link
Contributor Author

Yap! Your solution also works! Will use this in the meantime

@armenr
Copy link

armenr commented Jul 19, 2021

I'm working off of the vitesse boilerplate -- my windi.config.ts file is totally vanilla -- all I have done is add the fontFamily line (see below)

Unfortunately, these changes don't reflect in the app. According to my browser, the font being rendered is ui-sans-serif

I must be doing something stupid/missing something. Anyone got ideas? I landed on this issue because I first tried to set the font via theme --> extend --> fontFamily within the config, but that didn't help either.

I'd appreciate any help (even if it's to say "HEY IDIOT! GO READ THE MANUAL WHERE IT IS MENTIONED on here!"

Thanks again for all your hard work! :)

import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
import typography from 'windicss/plugin/typography'
import defaultTheme from 'windicss/defaultTheme'

export default defineConfig({
  darkMode: 'class',
  // https://windicss.org/posts/v30.html#attributify-mode
  attributify: true,

  plugins: [
    typography(),
  ],
  theme: {
    fontFamily: {
      sans: ['Inter var', ...defaultTheme.fontFamily.sans],
    },
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '65ch',
            color: 'inherit',
            a: {
              'color': 'inherit',
              'opacity': 0.75,
              'fontWeight': '500',
              'textDecoration': 'underline',
              '&:hover': {
                opacity: 1,
                color: colors.teal[600],
              },
            },
            b: { color: 'inherit' },
            strong: { color: 'inherit' },
            em: { color: 'inherit' },
            h1: { color: 'inherit' },
            h2: { color: 'inherit' },
            h3: { color: 'inherit' },
            h4: { color: 'inherit' },
            code: { color: 'inherit' },
          },
        },
      },
    },
  },
})

@HerrBertling
Copy link

@armenr Try this:

fontFamily: {
      sans: ['"Inter var"', ...defaultTheme.fontFamily.sans].join(','),
    },

It's a combination of what is said in the Tailwind docs about spaces in font family names (use extra quotes) and the workaround @antfu mentioned here. That should™ work 😊

@antfu antfu closed this as completed in bed55f6 Jul 26, 2021
@armenr
Copy link

armenr commented Jul 26, 2021

Thank you @HerrBertling !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@schelmo @HerrBertling @armenr @antfu @brandiqa