Customizer config css

Custom your colors, fonts, spacings, etc.

Font-family

Change the values

<style>
    :root {
        /* font family */

        --primary-font: 'Arial';
        --secondary-font: 'Comic Sans MS';
        --tertiary-font: 'Times New Roman';

        /* custom colors */

        --primary-color: #d62222;
        --secondary-color: #35a79c;
        --tertiary-color: #84c1ff;

        --red: #fe4a49;
        --blue: #005b96;
        --brown: #854442;
        --gray: #c0c5ce;
        --green: #009688;
        --orange: #fe8a71;
        --pink: #fec8c1;
        --purple: #8874a3;
        --yellow: #f6cd61;

        /* font size */

        --font-8: 0.6rem;
        --font-14: 0.9375rem;

        --font-custom-size: 28px;
        --font-custom-size2: 30px;
        --font-custom-size3: 45px;

        /* responsive sizes -sm, -md, -lg, -xl */

        --font-custom-size-sm: 12px;
        --font-custom-size2-sm: 30px;
        --font-custom-size3-sm: 45px;

        --font-custom-size-md: 13px;
        --font-custom-size2-md: 30px;
        --font-custom-size3-md: 45px;

        --font-custom-size-lg: 14px;
        --font-custom-size2-lg: 30px;
        --font-custom-size3-lg: 45px;

        --font-custom-size-xl: 15px;
        --font-custom-size2-xl: 30px;
        --font-custom-size3-xl: 45px;

        /* Margin, Padding & Gap */
        /* for responsive add -sm, -md, -lg, -xl */

        --m-custom: 50px;
        --my-custom: 18px;
        --mx-custom: 60px;
        --mt-custom: 10px;
        --mr-custom: 20px;
        --mb-custom: 30px;
        --ml-custom: 40px;

        --p-custom: 50px;
        --py-custom: 18px;
        --px-custom: 60px;
        --pt-custom: 10px;
        --pr-custom: 20px;
        --pb-custom: 30px;
        --pl-custom: 40px;

        --gap-custom: 50px;
        --rg-custom: 18px;
        --cg-custom: 60px;
    }
</style>

Live preview