PrimeVue migration (from v3 to v4) - Issue with Font-Family

I'm currently doing a migration from PrimeVue v3.46.0 to v4.2.1 following the official migration recomandations but I'm currently facing an unexpected behavior with the font family.

I was using the Soho theme with a custom theme switcher allowing the usage of the Lara theme (Light and Dark) and everything was nice. But now, I'm trying to use the Lara theme with the new usage and everything is nice except the font-family. The fact is that all my component are displayed in Time New Romans (which is a bit ugly IMO).

So i'd like to know if it's totally normal and i've got to configure it somewhere (like in the main.css file), if it's a configuration I missed (I checked the official config doc) or if I did something wrong.

Currently my code is total basic and ISO the code in the Styled Mode in the docs.

main.css:

body {
  margin: 0;
}

main.js:

import PrimeVue from 'primevue/config'
import Lara from '@primevue/themes/lara'
const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Lara,
        options: {
            prefix: 'p',
            darkModeSelector: false || 'none',
            cssLayer: false
        }
    }
})

EDIT

Obviously, if I put manually a specific font in my main.css like bellow, it works. main.css:

body {
  margin: 0;
  font-family: Montserrat;
}

The question is more, is there a default font that I should use doing something like font-family: var(--font-family) ?

Solution

I'm just updating an app from v3 primevue to v4 -- It looks like font is no longer defined as a default

From https://primevue.org/theming/styled/

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

So, it seems correct that we should now have to define the font-family on the body tag instead.

There is no default font defined

I was using the aura theme, which in v3 used the Inter font.

HTML (in head)

<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

CSS

:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}
html,body
{
    min-height:100%;
    font-family: 'Inter var', 'Inter', sans-serif;
}
.p-component, .p-component * {
  font-family: 'Inter var', 'Inter', sans-serif;
}

Is what I added to restore the font from v3