How to change the global primary font from the theme editor?

  • Resolved Gokul PM

    (@icemelting)


    3 years, 1 month ago

    Hi there,

    I am trying to minimize the use of plugins and directly use additional CSS to customize my website. In the same regard, how to change the font everything uses in the website from the theme editor? Any help is appreciated. Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    This is how the fonts are defined in the theme CSS …

    :root {
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
}

    … so you could either modify the CSS above and add it to “Customizer – Additional CSS” or you could use the –font-headings and –font-base variables above, for example …

    :root {
--font-headings: 'Times New Roman';
--font-base: 'Courier New';
}

    However, please note that this uses the CSS var() function which only works on more modern browsers.

    Oliver

    Thread Starter Gokul PM

    (@icemelting)

    Hi @domainsupport,

    As per your suggestion, I entered the following block by going to Customize -> Additional CSS

    :root {
    –global–font-primary: roboto;
    –global–font-secondary:roboto;
    }

    It works as expected. Thank you for the help. Have a great day!

    Regards,
    Gokul PM

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change the global primary font from the theme editor?’ is closed to new replies.