> For the complete documentation index, see [llms.txt](https://nghiaxchis.gitbook.io/ncmaz-nextjs-headless-cms-wordpres-blog-magazine/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nghiaxchis.gitbook.io/ncmaz-nextjs-headless-cms-wordpres-blog-magazine/ncmaz-faust/custom-color-fonts.md).

# Custom color, fonts

Custom color, fonts

### 1- Custom colors

We use CSS variables for 3 main theme colors: **Primary color**, **Secondary color,** and **Neutrals color,** following the [Tailwindcss style](https://tailwindcss.com/docs/customizing-colors).

You can find them in the `ncmaz-faust/src/styles/__theme_colors.scss` file

```css
:root {

  /* For rgb(240 249 255) */
  --c-primary-50: 240, 249, 255;
  --c-primary-100: 224, 242, 254;
  ...
  --c-primary-900: 12, 74, 110;

  --c-secondary-50: 240, 253, 244;
  ...
  --c-secondary-900: 20, 83, 45;

  --c-neutral-50: 249, 250, 251;
  ...
  --c-neutral-900: 17, 24, 39;
}
```

**Primary, Secondary color:**

These are the splashes of color that should appear the most in your UI, and are the ones that determine the overall "look" of the site. Use these for things like primary actions, links, navigation items, icons, accent borders, or text you want to emphasize.

**Neutrals color:**

These are the colors you will use the most and will make up the majority of your UI. Use them for most of your text, backgrounds, and borders, as well as for things like secondary buttons and links.

**How to custom color?**

You just need to change the color values in those CSS variables.

When defining your colors this way, make sure that the format of your CSS variables is correct for the color function you are using. You’ll want to use spaces if using the modern [space-separated syntax](https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/#aa-a-tale-of-new-syntaxes), and commas if using legacy functions like `rgba` or `hsla`:

```css
  :root {
    /* For rgb(255 115 179 / <alpha-value>) */
    --color-primary-50: 255 115 179;

    /* For hsl(198deg 93% 60% / <alpha-value>) */
    --color-primary-50: 198deg 93% 60%;

    /* For rgba(255, 115, 179, <alpha-value>) */
    --color-primary-50: 255, 115, 179;
  }
```

### 2- Custom fonts

The template uses Nextjs **Google-fonts**, so please read this tutorial will help you to customize the font - <https://nextjs.org/docs/app/building-your-application/optimizing/fonts>

You can then go to the `src/pages/_app.tsx` file to customize your font.

1. Open/edit the **`Ncmaz-faust/src/pages/_app.tsx`** file

2. Chose/change the Google font as you like (<https://fonts.google.com/>)<br>

   <figure><img src="https://1497096588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdrDDvIKPQvgLvQ5xJBSo%2Fuploads%2FBCnfGGlOYLEUaZxNpY27%2FScreenshot%202023-10-09%20at%2015.54.28.png?alt=media&amp;token=cdd30b68-5e41-43bf-b872-0d3bdbd51c23" alt=""><figcaption><p>change google font</p></figcaption></figure>

3. Change the font name as you like<br>

   <figure><img src="https://1497096588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdrDDvIKPQvgLvQ5xJBSo%2Fuploads%2FZH2Qc9muI08o5COxduOO%2Fimage.png?alt=media&amp;token=74ebf189-c6e6-4426-82da-adced5a117d8" alt=""><figcaption><p>font name</p></figcaption></figure>

4. Save then Redeploy to hosting/production