How to Change to System Fonts in Purity IV, Similar to Cassiopeia's Approach

jonasso

Hello,
I am currently working on customizing the Purity IV template on Joomla 5 for my website, and I'm interested in modifying the default font settings to utilize system fonts, similar to the Cassiopeia template's functionality. In Cassiopeia, it offers the option to choose from a variety of system font stacks, including but not limited to:

Humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif
Geometric: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif
Classic: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif
Monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace

These options significantly contribute to the flexibility and aesthetic appeal of a website, allowing it to align more closely with the native look and feel of different operating systems and user preferences and reducing the page load time for people with a slow internet connection, especially in 3rd world countries.

However, after disabling Google Fonts and not opting for local custom fonts in Purity IV, the template defaults to using Times (which I believe is the browser's default serif font), which is not ideal for my project's design requirements.

My questions are:

Are there any considerations or best practices I should be aware of when implementing system fonts in Purity IV, to ensure compatibility so my changes will not be overridden when I update the template?
Can you please point me in the right direction as to where I should make this change?

Thank you in advance for your guidance and support.

Best regards,

saguaros

jonasso Hi

With templates built with T4 framework like Purity IV, you can upload your custom fonts and set to use as you wish: https://www.joomlart.com/documentation/t4-framework/theme-settings#custom-font_jadoc

In case that you want to use Google fonts but load it from local, you can try with our JA Fonts component: https://www.joomlart.com/joomla/extensions/ja-font-component

Regards

jonasso

saguaros I might not have been clear enough. I don't want to upload custom fonts. I want to use the user's Operating System default fonts.
In the first example provided, the Humnist has the font Seravek, which is included in iOS, the first fallback font is Gill Sans Nova, which is included in Windows 10 and newer, the next fallback font is Ubuntu and it is included in many Linux distributions.

saguaros

jonasso I got your point but as you know each template has its own concept with associated design / typo ... included so it can look best. Unfortunately, there is no option to inherit the OS font like that, Cassiopeia is a super clean template 🙂

jonasso

I understand. However, can you point it out to me where I can change it in the source code?

saguaros

You can override with this custom css:

:root {
 --body-font-family: var(--t4-body-font-family);
}

put into file: ROOT/templates/ja_purity_iv (your default template)/local/css/custom.css (Create this file if it doesn't exist now)