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



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?

Continue reading...