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 });

[ravimallya]

This code works fine for me as expected in Angular 17,

import { HttpClient } from '@angular/common/http';
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import ImageEditor from 'tui-image-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'tuiApp';
  private imageEditor!: ImageEditor;

  private isBrowser: boolean;
  TUI_selectedItem: any;
  TUI_selectedFont: any;

  constructor(private http: HttpClient, @Inject(PLATFORM_ID) private platformId: Object) {
    // Check if the code is running in the browser
    this.isBrowser = isPlatformBrowser(this.platformId);
  }

  ngOnInit(): void {
    if (this.isBrowser) {
      // Lazy load 'tui-image-editor' only on the client-side
      import('tui-image-editor').then((module) => {
        const ImageEditor = module.default;
        this.initializeImageEditor(ImageEditor);
      });
    }
  }
  initializeImageEditor(ImageEditor: any): void {
    this.imageEditor = new ImageEditor(document.querySelector('#tui-image-editor') as HTMLElement, {
      includeUI: {
        loadImage: {
          path: 'assets/sample.jpg', // Default image if you want to preload one
          name: 'SampleImage'
        },
        theme: {}, // Customize theme if needed
        initMenu: 'text',
        menuBarPosition: 'left'
      },
      uiSize: {
        width: '100%',
        height: '100%'
      },
      cssMaxWidth: 1400,
      cssMaxHeight: 1200,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
      }
    });
    //Font select list
    //--------------------------------------
    //Any installed web font from Google will work: https://fonts.google.com/
    let fontArray = ["Archivo", "Archivo Black", "Archivo Narrow"];

    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));
    //-------------------------------------
    //ON TUI objectActivated
    //   Keep track of active/selected item
    this.imageEditor.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
       *******************************/

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

    if (!this.TUI_selectedItem) {
      console.error("No item selected or item is not on canvas.");
      return;
    }

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

    if (font && this.TUI_selectedItem) {
      this.imageEditor.changeTextStyle(this.TUI_selectedItem.id, {
        fontFamily: font
      }).catch((err: any) => {
        console.error("Failed to change font style: ", err);
      });
    }
  }

  TUI_updateFontSelected(layer: any) {
    console.log("TUI_updateFontSelected", layer);

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

Since the Google font 'Archiva' is a variable font, I couldn't use it as is by adding import or style reference. I'd to download the fonts and use static .ttf fonts as below:

@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/Archivo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo Black';
    src: url('/assets/fonts/Archivo-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo Narrow';
    src: url('/assets/fonts/Archivo_Condensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}