font-family option in summernote not working

Question

fontfamily option is not working in summernote I tried

$("#divCalltoactiontitle").summernote({
        toolbar: [

            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']], 
        ],
        fontNames: [
    'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
    'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
    'Sacramento'
        ],

    } );

Speed

Answer 1

It seems that you missed fontname on your toolbar settings. fontNames options is just setup font items.

toolbar: [
  ['fontname', ['fontname']
]

http://summernote.org/deep-dive/#custom-fontnames

For more about toolbar settings, please refer to default toolbar settings.

toolbar settings: https://github.com/summernote/summernote/blob/develop/src/js/bs3/settings.js#L67

fontNames settings: https://github.com/summernote/summernote/blob/develop/src/js/bs3/settings.js#L112

Suzannasuzanne

Answer 2

fontNames option is to tell Summernote what to display in fontFamily dropdown.

However, Summernote tests font in fontNames before adding them to dropdown. This is problem while using web fonts. It’s not easy picking up nice time to check availabilities of web fonts. You can define a list for web fonts to be ignored with fontNamesIgnoreCheck.

Ref: http://summernote.org/deep-dive/#initialization-options

So, you probably need to add fontNamesIgnoreCheck option, too.

fontNames: [ 'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Sacramento'],
fontNamesIgnoreCheck: [ 'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Sacramento'],

Summernote also checks current font-family and font-size of your browser to initialize default font-family and font-size.

It is usually found in body style. If you set style of body as:

body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
}

Summernote will show Helvetica Neue and 16px as default font-style and default font-size respectively.

Dirham