W
Wasp•2w ago
Bruno Njeru

Style

How do I change the font in the login and signup page which use stitches and are in the wasp.out dir
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @Bruno Njeru. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the font in the login and signup pages that use Stitches in Wasp, you have a few options: Using the appearance prop The Auth UI components in Wasp use Stitches for styling, and you can customize them by passing an appearance prop: 
import { LoginForm } from 'wasp/client/auth'
import type { CustomizationOptions } from 'wasp/client/auth'

// Define your custom appearance
const authAppearance: CustomizationOptions['appearance'] = {
  colors: {
    brand: '#5969b8',
    brandAccent: '#de5998',
    submitButtonText: 'white',
  },
  // You can customize fonts here
}

export function LoginPage() {
  return (
    <LoginForm
      appearance={authAppearance}
    />
  )
}
import { LoginForm } from 'wasp/client/auth'
import type { CustomizationOptions } from 'wasp/client/auth'

// Define your custom appearance
const authAppearance: CustomizationOptions['appearance'] = {
  colors: {
    brand: '#5969b8',
    brandAccent: '#de5998',
    submitButtonText: 'white',
  },
  // You can customize fonts here
}

export function LoginPage() {
  return (
    <LoginForm
      appearance={authAppearance}
    />
  )
}
You can customize various design tokens through this approach as described in the Auth UI documentation. Adding fonts to your app For adding custom fonts to your Wasp app, you have these options: 1. Using the app.head property: You can add font links in your app declaration: 
app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "ToDo App",
  head: [
    "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
  ]
}
app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "ToDo App",
  head: [
    "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
  ]
}
This approach is documented in the Customizing the App documentation. 2. Using @fontsource packages: If you're using the @fontsource package, there's a known issue with Vite not including these files in the .wasp/out directory. This is a common issue with Vite and serving fonts from node_modules. The Wasp team is aware of this issue and is working on it as mentioned in a GitHub issue. Alternative approach If you need more customization, you can create your own custom login and signup forms instead of using the built-in components. As mentioned in a Discord support thread:
You could not use our SignupForm, but instead go "level deeper" and implement your own form for signup while using our lower-level primitives. For example, if you are using username/pass auth method, you could use signup and login actions that Wasp exposes for it.
This approach gives you full control over styling but requires more work to implement the authentication logic yourself. Note that the Wasp team is also planning to switch away from Stitches for Auth UI as mentioned in this GitHub issue, since Stitches is no longer maintained. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
Bruno Njeru
Bruno NjeruOP•2w ago
Great got it

Did you find this page helpful?