Configuration

Safḥa is built on top of Nuxt.js, which means you can customize the configuration of your project as you would with any Nuxt.js project. This document will guide you through the configuration of your Safḥa project.

Nuxt Config

You can customize the Nuxt configuration by creating a nuxt.config.js file in the root folder of your project. You can add your custom configurations to this file or override the existing configurations since Safḥa is built as a Nuxt layer.

Adding fonts

Safḥa integrates @nuxtjs/google-fonts module to easily add Google fonts to your project. You can add your custom fonts by adding the following code to the nuxt.config.js file.

export defineNuxtConfig({
  googleFonts: {
	families: {
	  Inter: true,
	  'Open+Sans': true,
	  // Add your custom fonts here
	}
  }
})

Integrating custom fonts with Tailwind CSS

To use custom fonts with Tailwind CSS, you can add the following code to the tailwind.config.js file.

import type { ModuleOptions } from '@nuxtjs/tailwindcss';

export default <Partial<ModuleOptions['config']>>{
  theme: {
	extend: {
	  fontFamily: {
		sans: ['Open Sans', 'sans-serif'],
		// Add your custom fonts here
	  }
	}
  }
}

Then you can use the custom fonts in your components like this:

<p class="font-sans">This is a custom font</p>

Refer to google-fonts @nuxtjs/google-fonts for more information on how to use the module.