Add some font families to the text styles

[sanirasimato]

Version

toast ui image editor 3.2.0

Development Environment

basically I want to work it with every possible modern browsers and every possible OS, How ever Now I'm working with windows 10 and chrome.

Current Behavior

After adding a text to the image, we can change it's styles, like change color, alignment, make it bold and italic, etc... but we can't change the font family. I know using your API chageText() method I can manually change the fontFamily.

Expected Behavior

How do I add some fonts those can select(using a drop down possibly) in the way other styles can be select in the editor.

[jinwoo-kim-nhn]

@sanirasimato Thank you for your interest. I will consider this part actively.

[IndrajaPunna]

Hi Is this enhancement implemented? If not can you let me know if this is in your pipeline?

[TheWilsonDelta]

Hi, this would be a fantastic feature to have. If need help to implement, please let me know, I can give a hand.

[Huangcuikai]

i am searching for font family too, but..

[sharifulinfo]

@jinwoo-kim-nhn Is it done ? .. I am also search this issue. like how I change the font from drawdown..?

[ligne13]

+1 please !

[MarcoBerubeBKOM]

I have injected a fontFamily dropList into the TUI image Editor. This is an Angular 10 integration.

1. After the init of the editor, I inject the HTML content of the fontFamily I needed to manually add the OnChange event on the select

      //Font select list
      //--------------------------------------
      //Any installed web font from Google will work: https://fonts.google.com/
      let fontArray = ["Arial", "Arial Black", "Caveat", "Comic Sans MS", "Courier New","Georgia1","Impact","Lobster Two", "Lucida Console","Luckiest Guy", "Open Sans","Pacifico", "Palatino Linotype","Press Start 2P", "Roboto", "Tahoma", "Tangerine", "Times New Roman","Tourney","Ultra", "Verdana","Symbol","Webdings","Wingdings"];

      let fontSelectHTML = '<select #fontselect class="form-select font-selector">';
      for (let i = 0; i < fontArray.length; i++) {
        let selected = '';
        if(i == 0){
          selected = 'selected';
        }
        fontSelectHTML += '<option style="font-family:'+fontArray[i]+';" value="'+fontArray[i]+'" '+selected+'>'+fontArray[i]+'</option>';
      }
      fontSelectHTML +=  '</select>';

      let textMenuAlign = document.querySelector('.tui-image-editor-menu-text .tie-text-align-button');
      textMenuAlign.insertAdjacentHTML('afterbegin', fontSelectHTML);

      document.querySelector('.font-selector').addEventListener('change', () =>
        this.TUI_updateFontOnText(document.querySelector<HTMLInputElement>('.font-selector').value));
      //-------------------------------------

2. Here's the Update Font function:

 /********************************
   * Update font familty on text layer
   *******************************/
  TUI_updateFontOnText(font:string) {
    console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);

    if(font){
      this.TUI_selectedFont = font;
    }

    if(font && this.TUI_selectedItem){
      this.TUI.changeTextStyle(this.TUI_selectedItem.id, {
        fontFamily: font
      });
    }
  }

3. Update font selected

//ON TUI objectActivated
    //   Keep track of active/selected item
    this.TUI.on('objectActivated', props => {
      this.TUI_selectedItem = props;
      this.TUI_updateFontSelected(props);
      console.log('TUI_selectedItem', props);
    });


/********************************
   * Update font selected with the fontfamily of the selected layer
   *******************************/
  TUI_updateFontSelected(layer:any) {
    console.log("TUI_updateFontSelected", layer);

    if(layer.fontFamily){
      document.querySelector<HTMLInputElement>('.font-selector').value = layer.fontFamily;
      this.TUI_selectedFont = layer.fontFamily;
    }
  }

The fonts need to be integrated into the CSS like this:

@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/luckiestguy.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[dano1066]

I have tried setting the text style using a bunch of different calls and none of them seem to work. This is using the js implementation. Is there a better way to change the font style by default rather than making it something that can be toggled?

		imageEditor.changeTextStyle(imageEditor.activeObjectId, {
			'font-family': 'Arial',
			"fontFamily": 'Arial',
			fontFamily: 'Arial'
		}, true);

[marcoberube]

This syntax works, look at me code above.

this.TUI.changeTextStyle(this.TUI_selectedItem.id, { fontFamily: font });