Wasp-lang•3mo ago

Change main font globally

I know it's probably a silly question but what's the easiest way to change the font-family globally? Through the tailwind.config.cjs?

4 Replies

kapa.ai•3mo ago

Hi @mb23. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the font-family globally using Tailwind CSS in a Wasp project, you can extend the default Tailwind CSS configuration in your tailwind.config.cjs file. Here's how you can do it:

/** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],  
  theme: {  
    extend: {
      fontFamily: {
        'sans': ['Your Font Name', ...defaultTheme.fontFamily.sans],
      },
    },  
  },  
  plugins: [],  
}

/** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],  
  theme: {  
    extend: {
      fontFamily: {
        'sans': ['Your Font Name', ...defaultTheme.fontFamily.sans],
      },
    },  
  },  
  plugins: [],  
}

In the above code, replace 'Your Font Name' with the name of the font you want to use. This will add your font to the list of sans-serif fonts that Tailwind CSS uses by default. After you've made these changes, you can use the font-sans utility class provided by Tailwind CSS in your React components to apply your font globally. Please note that you need to have the font files available in your project or loaded from a CDN in your project's HTML file. If you're loading the font from a CDN, you can use the app.head property in your Wasp project to add a link to the font's CSS file. This feature is not yet documented in the Wasp docs, but it's mentioned in a Github issue (https://github.com/wasp-lang/wasp/issues/296). Also, remember to restart your Wasp server (wasp start) after making changes to the tailwind.config.cjs file to ensure that Wasp picks up the changes. Sources: - Enabling Tailwind Step-by-Step (https://wasp-lang.dev/docs/project/css-frameworks#enabling-tailwind-step-by-step) - Github Issue: We are missing documentation for app.head (https://github.com/wasp-lang/wasp/issues/296) - Github Issue: Styling improvements (https://github.com/wasp-lang/wasp/issues/294) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mb23, 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?

mb23•3mo ago

@kapa.ai I want to add Roboto as a new main font. To what file do I need to add the <link> to the font file?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add the Roboto font to your Wasp project, you can use the app.head property in your Wasp project's main.wasp file. This property allows you to add additional lines to the <head> section of your app's HTML file, such as links to external stylesheets or scripts. Here's an example of how you can add a link to the Roboto font:

app todoApp {
    title: "ToDo App",
    head: [
        "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
    ]
}

app todoApp {
    title: "ToDo App",
    head: [
        "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
    ]
}

In the above code, replace todoApp with the name of your app. The href attribute in the <link> tag should point to the URL of the Roboto font's CSS file. After you've made these changes, you can use the Roboto font in your CSS or Tailwind CSS classes. Please note that this feature is not yet documented in the Wasp docs, but it's mentioned in a Github issue (https://github.com/wasp-lang/wasp/issues/296) and in the Wasp documentation (https://wasp-lang.dev/docs/project/customizing-app). Sources: - Github Issue: We are missing documentation for app.head (https://github.com/wasp-lang/wasp/issues/296) - Wasp Docs: Customizing the App (https://wasp-lang.dev/docs/project/customizing-app) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mb23, 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?

miho•3mo ago

The bot is correct as far as I can see 👍

Gaming

Programming

Change main font globally