cssangularfontstailwind-cssprimeng

How to change the default font for entire Angular project?

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>:

inspect of

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?

Solution

  • 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 {
  --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.

    @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:

    @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'
      }
    }
  }
})