Loading Custom Font Issue

[RakulAgn]

I Hope this Option is not working setOption and Getting Error on This Method

Property 'setOptions' does not exist on type 'Property<PropertyProps>'

const styleManager = editor.StyleManager
const fontProperty = styleManager.getProperty('typography', 'font-family')
fontProperty.setOptions(fonts)
styleManager.render()

Any Suggestions on this @lexoyo

[lexoyo]

Is fonts defined?

[lexoyo]

I will try to help you but I close the issue because it is not related to the use of this plugin

[RakulAgn]

Is fonts defined?

so basically i am loading font names and transforming them into googleapis link

public loadCustomFonts() {
    const editor = this.editor;
    const styleManager = editor.StyleManager;

    console.log(styleManager);

    const fontFamilyProperty = styleManager.getProperty(
      'typography',
      'font-family',
    );
    // // @ts-ignore
    fontFamilyProperty?.setOptions(this.transformFontsForList());
  }

  private transformFonts = () => {
    const userFontList = this.opts.customFontList;

    return userFontList.reduce((acc, font) => {
      font.variants.forEach((variant: any) => {
        const variantName =
          variantNamesMap[variant.variant_value] || variant.variant_value;
        const formattedFontName = font.font_name.replace(/ /g, '+');
        const fontKey = `${font.font_name} ${variantName}`;
        const fontUrl = `https://fonts.googleapis.com/css2?family=${formattedFontName}:wght@${variant.variant_value}`;
        acc[fontKey] = fontUrl;
      });
      return acc;
    }, {});
  };

  private transformFontsForList = () => {
    const userFontList = this.opts.customFontList;
    return userFontList.flatMap(font => {
      return font.variants.map((variant: any) => {
        const variantName =
          variantNamesMap[variant.variant_value] || variant.variant_value;
        return {
          value: `${font.font_name}, ${font.fallback_font}`,
          name: `${font.font_name} ${variantName}`,
        };
      });
    });
  };

this is want i am doing i am loading font from db converting into link and trying to setOptions but it shows typeError

[lexoyo]

ouah i'm sorry but i have no idea

[lexoyo]

maybe with a reproductible demo on codepen? but what is your question exactly? I'm trying really :sweat_smile:

[lexoyo]

I go here https://grapesjs.com/demo

I paste this in the console

const fonts = []
const styleManager = editor.StyleManager
const fontProperty = styleManager.getProperty('typography', 'font-family')
fontProperty.setOptions(fonts)

it doesnt do any error

[RakulAgn]

Okie Can you Explain how to load custom fonts in the editor

[lexoyo]

Okie Can you Explain how to load custom fonts in the editor

With this plugin you don't have to do it, it is done by the plugin

Your code works for me as you can see in my comment

[RakulAgn]

I'm developing a custom plugin to handle font integration in my project. The main functionalities I need are:

Loading fonts from my personal database Populating a dropdown menu with these font options Inserting the appropriate link for the selected font into the document's

I don't require pre-built UI components or additional features. My focus is specifically on implementing the font loading and insertion process. Can you provide guidance on these core aspects?

The Below Code is Actual Implementation in My Plugin

public loadCustomFonts() {
    const editor = this.editor;
    const styleManager = editor.StyleManager;

    console.log(styleManager);

    const fontFamilyProperty = styleManager.getProperty(
      'textstyles',
      'font-family',
    );

    fontFamilyProperty?.setOptions(this.transformFontsForList());
  }

and this function is called while editor.on('load')

[lexoyo]

i think what you do should work

[RakulAgn]

i think what you do should work

But its not working this the error what i gets it tells the setOptions is not in the Property then how did you used setOptions is that custom method did you implemented or its provided by grapesjs ??

[lexoyo]

https://github.com/silexlabs/grapesjs-fonts/issues/16#issuecomment-2296035066