globally change font

[sancelot]

Hi,

Is there a way to globally change the font of primereact components ?

I tried, but primereact components does not follow my globally font applied

Thanks ^^

[PH-Codestone]

this sounds like a stylesheet thing. My code has
import 'primereact/resources/themes/blah blah blah.css'
way up in app.js, so it's enclosing all the components below.

[melloware]

@sancelot if you bring up the PR showcase options and click on Scale you can see it dynamically changes the font size of the whole app.

And its documented here: https://primereact.org/theming/#scale

[sancelot]

I assume you can change scaling .... but that s not the question I asked.

I want to change the font type globally used .

in css style , if I use similar implementation as above , all the pure HTML components I implement are using the global css font,
but any primereact component does not use it.

/* global font css */
@font-face {
font-family: "Mulish";
font-style: normal;
font-weight: 200 1000;
font-display: block;
src: local("Mulish"), url("./assets/badab.ttf") format("truetype");
}
html,
body,
#root {
--main-blue: #014f7e;
--main-grey: #ecf0f1;
font-family: "Mulish", sans-serif;
}

[melloware]

is it being overridden by the theme somehow? Change the $fontFamily variable in your theme?

[sancelot]

I imported the theme in the react app
import "primereact/resources/themes/lara-light-cyan/theme.css";

I may load it directly from the global css anotherway ?

I really don't understand , only primereact components are overloading global font ;

[sancelot]

it seems I managed to do it , overloading ;

.p-component {
font-family: "Mulish";
}