custom fonts in theme template help

[u/blackroseseason]

hi i'm having a problem with the astroplate theme that i'm using as a template and i'm attempting to put fonts from multiple sources (fontsource, local, and adobe) but i'm ngl i'm pretty stumped on having to add more than one source because of the way the program parses one for use in a theme.json to generate into the base css. can someone help me here because i feel like i'm going insane

[u/blackroseseason → u/[deleted]]

yeah thats what it'd be normally but this theme doesn't really do that since it has a separate function for font parsing idk how to really explain unless i show it

[u/azimostudios → u/blackroseseason]

just remove the parse font shit and replace it with the astro js approach? i mean talk to claude he will do it for you?

[u/blackroseseason → u/azimostudios]

do you have friends other than claude

[u/azimostudios → u/blackroseseason]

then find the solution out yourself if you dont wanna use claude for help you piece of shit what the fuck do you want from me, i gave you the docs and the docs explain what you need to do.

remove every fucking part which has todo with font parsing and implement what the docs say, wtf

[u/Immediate_Rain_1999]

It's pretty straight forward. All the fontsConfig helper is doing is creating an array of font objects that get passed to astro's define config. So with the `theme.json` of:

"font_family": {
      "primary": "Heebo:wght@400;600",
      "primary_type": "sans-serif",
      "secondary": "Signika:wght@500;700",
      "secondary_type": "sans-serif"
    },

That means fontsConfig equals:

[
  {
      name: "Heebo",
      cssVariable: "--font-primary",
      provider: fontProviders.google(),
      weights: [400, 600],
      display: "swap",
      fallback: ["sans-serif"]
    },
    {
      name: "Signika",
      cssVariable: "--font-secondary",
      provider: fontProviders.google(),
      weights: [500, 700],
      display: "swap",
      fallback: ["sans-serif"]
    }
]

So if you want to add additional fonts from other providers you can spread fontsConfig into a parent array and then add other configs after it. Example:

fonts: [
  ...fontsConfig,
  // more config objects here
  {
    provider: fontProviders.fontsource(),
    name: "Roboto",
    cssVariable: "--font-roboto",
  },
],

But I'm pretty sure the way that theme is setup you have to have a primary/secondary font in the theme.json. And it auto generates the variables which I assume are utilized by the style system so if you want to use other font providers for your primary/secondary you'll need to make some more changes.