Question: Is this the best way to override font families

[TatisLois]

I would like to change the default fonts in my application for the default theme. To make this work, i'm inspecting each text variant for it's css variable then targeting it

ex:

  --rs-font-family-featured-1: "Supreme";
  --rs-font-family-featured-1-m: "Supreme";
  --rs-font-family-featured-1-l: "Supreme";
  --rs-font-family-featured-1-xl: "Supreme";

Is this the recommended way, my concern is missing variables

[blvdmitry]

Hey, here is an example of how we use theming to change the typography on our website. This example is the Funky theme that you can see on the landing page hero section and it's the reshaped.config.js file:

// @ts-check
/** @type {import('reshaped').ReshapedConfig} */
const config = {
    themes: {
        funky: {
            unit: {
                radiusSmall: { px: 0 },
                radiusMedium: { px: 0 },
                radiusLarge: { px: 16 },
            },
            color: {
                foregroundPrimary: { hex: "#F43523", hexDark: "#F65A4B" },
                foregroundPositive: { hex: "#038537", hexDark: "#03AB5F" },
                backgroundPageFaded: { hex: "#DCEFF7", hexDark: "#00203D" },
                backgroundNeutralFaded: { hex: "#DCEFF7", hexDark: "#00203D" },
                backgroundPrimary: { hex: "#F43523", hexDark: "#F43523" },
                backgroundPrimaryFaded: { hex: "#FDE0DD", hexDark: "#3F0803" },
                backgroundPrimaryHighlighted: { hex: "#F65A4B", hexDark: "#F65A4B" },
                backgroundPositive: { hex: "#038537" },
                backgroundPositiveFaded: { hex: "#E6FEF3", hexDark: "#01321C" },
                backgroundPositiveHighlighted: { hex: "#009950" },
                borderPrimary: { hex: "#F43523", hexDark: "#F65A4B" },
                borderPrimaryFaded: { hex: "#FBD0D4", hexDark: "#6A1C1C" },
                borderPositive: { hex: "#038537", hexDark: "#03AB5F" },
                borderPositiveFaded: { hex: "#CDEDD5", hexDark: "#034A2A" },
            },
            fontFamily: {
                display: {
                    family: "Space Grotesk, Arial, sans-serif",
                },
                body: {
                    family: "Space Grotesk, Arial, sans-serif",
                },
            },
        },
    },
};

module.exports = config;

In this case it updates the font for both, titles and regular text. Then on the website – we load this custom font file from Google fonts.

You can find more about creating your own themes in our documentation: https://reshaped.so/content/docs/theming/creating-themes

[TatisLois]

Awesome so

fontFamily: {
  display: {
    family: "Space Grotesk, Arial, sans-serif",
  },
  body: {
    family: "Space Grotesk, Arial, sans-serif",
  },

Will generate all the display variants such as display-1-m , display-1-l, display-2, display-3

And if I wanted to target any more I would just add the properties ie: featured, body-medium, body-strong etc..

I'll test this out in a bit, I appreciate it!

[blvdmitry]

fontFamily currently has only 2 groups (https://reshaped.so/content/docs/theming/creating-themes#font-family), so display will apply it for all headings, and body applies it for regular text

I can look into supporting individual families for each font size as well if you have a use case for that

[TatisLois]

No I think this works, I can always also use classes for one offs!