How to change the default font for entire Angular project?

Question

I am currently working on a project with these technologies: Angular 19; PrimeNG 19; Tailwindcss 4.1.

I am trying to make "Exo 2" as my default font for my entire project. So I decided to try and make "Exo 2" the tailwindcss default font, and then, the components from PrimeNG would inherit the font family.

This is my styles.scss:

@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");
@import "tailwindcss";
@import "primeicons/primeicons.css";
@import "leaflet.markercluster/dist/MarkerCluster.css";
@import "leaflet.markercluster/dist/MarkerCluster.Default.css";

@theme {
  --default-font-family: "Exo 2", sans-serif;
}

// I have also tried this:
/*@theme {
  --font-sans: "Exo 2", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "Exo 2", ui-serif, Georgia, Cambria, "Times New Roman", Times,
    serif;
  --font-mono: "Exo 2", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}*/

html,
body {
  height: 100%;
}

.p-component {
  font-family: inherit;
}

I was expecting that "Exo 2" would become the default font for my project, however, when I inspect a PrimeNG component, I see this when I inspect <p-menubar>:

The same happens when I inspect something that isn't a PrimeNG component, for example a <p>.

What's the problem? Can it be something with my index.html? Can it be some configuration of the tailwindcss?

Answer 1

Font declaration with TailwindCSS v4

First of all, the --default-font-family namespace does not exist in TailwindCSS v4. The --font-* namespace is used instead.

• Theme variable namespaces - TailwindCSS v4 Docs

@theme {
  --font-custom: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* ... */
}

You can define your custom font list using --font-custom. For example, you can register your "Exo 2" font under font-exo.

@theme {
  --font-exo: "Exo 2", sans-serif;
}

After that, you should override the default font in the html, body selectors. However, it's important to note the use of CSS layers. Place all your default styling in the base layer to avoid higher specificity than TailwindCSS or PrimeNG styles.

• From v4 the reset style cannot be overridden by TailwindCSS classes - StackOverflow

@layer base {
  html,
  body,
  body .p-component {
     font-family: var(--font-exo);
  }
}

Set default font family in PrimeNG v19

There is no design for fonts as UI components inherit their font settings from the application.

Source: https://primeng.org/theming#font

So I would use something like this for TailwindCSS v4 with PrimeNG v19:

• PrimeNG with TailwindCSS v4 - PrimeNG v19 Docs

@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");

@import "tailwindcss";
@plugin "tailwindcss-primeui";
@import "primeicons/primeicons.css";

@theme {
  --font-exo: "Exo 2", sans-serif;
}

@layer base {
  html,
  body,
  body .p-component {
    font-family: var(--font-exo);
  }
}

providePrimeNG({
  theme: {
    preset: Aura,
    options: {
      cssLayer: {
        name: 'primeng',
        order: 'theme, base, primeng'
      }
    }
  }
})