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:

  1. 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?
  2. 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 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.

        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 🙂

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

          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)

          Write a Reply...
          You need to Login to view replies.