https://www.youtube.com/watch?v=KX-WQsvEZp0

Benefits

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Style heading tag and class from one place

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Override font styles with utilities

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Use any variable inside both font styles and utilities

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Make global typography updates easily

</aside>

How to Apply

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Upload fonts to Webflow

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Set font family variables and utilities Match font names from the installed fonts panel

</aside>

/* font family */
--ff0: inherit;
--ff1: Satoshi, sans-serif;

/* font family */
[class*="ff1"] { font-family: var(--ff1); }
[class*="ff0"] { font-family: var(--ff0); }

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Set font weight variables and utilities Match font weights from the installed fonts panel

</aside>

/* font weight */
--fw0: inherit;
--fw1: 400;
--fw2: 500;
--fw3: 700;

/* font weight */
[class*="fw1"] { font-weight: var(--fw1); }
[class*="fw2"] { font-weight: var(--fw2); }
[class*="fw3"] { font-weight: var(--fw3); }
[class*="fw0"] { font-weight: var(--fw0); }