Wave - how to change default font to a Google font?

Hey Daniel!

Great to hear you're enjoying Wave! 🚀

If you've already set up Google Fonts in Filament using GoogleFontProvider, that's great! However, if you want to replace the default font across your entire Wave app (including non-Filament areas), here's how you can do it:

Step 1: Add the Google Font to Your Theme's app.css

Open your main CSS file, typically located at /resources/themes/anchor/assets/css/app.css, or the app.css file of the theme that you are using, and import the Google font at the top:

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');

Step 2: Update the Tailwind Configuration

To ensure that the Google font is used throughout your Wave project, you'll need to update your Tailwind CSS configuration file, usually located at tailwind.config.js.

Edit the file to include your new font:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['"Exo 2"', 'sans-serif'], // Add your Google font here
            },
        },
    },
    plugins: [],
};

Step 3: Apply the New Font Globally

In your /resources/themes/anchor/assets/css/app.css, update the base styles to use the new font:

body {
    font-family: 'Exo 2', sans-serif;
}

Step 4: Compile Your Assets

Now, run the following command to compile your assets using Vite:

npm run dev

Or, for production:

npm run build

If you're not seeing the changes, try clearing your browser cache or running:

php artisan optimize:clear

This is the standard way of making any CSS/JS related changes in Wave and any Laravel project that uses Vite.

Let me know if that works for you!

- Bobby