Need help using custom fonts

[TehreemFarooqi]

Hi, I am trying to use custom fonts in a canvacord project.

In my index.js, I am loading fonts like this:

Font.fromFileSync("assets/fonts/Cardo/Cardo-Bold.ttf");
Font.fromFileSync("assets/fonts/Inter/Inter-Italic.ttf");
Font.fromFileSync("assets/fonts/Inter/Inter-Regular.ttf");

Then in my template.js file, I am trying to use these fonts as such:

JSX.createElement(
        "h1",
        {
          style: {
            fontSize: "80px", // Font size for the Nym
            fontFamily: "CardoBold", // Cardo font, bold
            color: "#000000", // Black color
            marginBottom: "20px", // Space between Nym and type
          },
        },
        Nym
      ),
      // Type (Subtitle)
      JSX.createElement(
        "span",
        {
          style: {
            fontSize: "40px", // Font size for the type
            fontFamily: "Inter-Italic", // Inter font, regular
            color: "#545454", // Gray color for the type
            marginBottom: "40px", // Space between type and definition
            // fontStyle: "normal",
          },
        },
        type
      ),
      // Definition (Body Text)
      JSX.createElement(
        "p",
        {
          style: {
            fontSize: "40px", // Font size for the definition
            fontFamily: "Inter-Regular", // Inter font, regular
            color: "#000000", // Black color
            lineHeight: "1.4", // Line height for readability
            marginTop: "0", // Remove top margin
          },
        },
        definition
      )

The image I get at the end just uses the font first loaded for all text elements. If I write:

Font.fromFileSync("assets/fonts/Inter/Inter-Italic.ttf");
Font.fromFileSync("assets/fonts/Cardo/Cardo-Bold.ttf");
Font.fromFileSync("assets/fonts/Inter/Inter-Regular.ttf");

then my final image with have all text with Inter font.

My canvacord version is v6.0.2.

I couldn't find detailed documentation on using custom fonts in canvacord. How do I solve this and can you point me to the documentation for this?

@twlite

[twlite]

@TehreemFarooqi Font.fromFileSync returns font name. Usage of font family is not supported so you will have to use the name returned by Font.fromFileSync method. Alternatively, the second argument takes the name of the font, you can set it there for it to work.

[twlite]

Something like this

const font = Font.fromFileSync('path/to/font.ttf');
// Or
const font = Font.fromFileSync('path/to/font.ttf', 'my-font');

fontFamily: font.name
// or
fontFamily: 'my-font'