CODEWITHSUNDEEP
summernote
user3844820
user3844820

Reputation: 82

font-family option in summernote not working

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'
        ],

    } );

Upvotes: 5

Views: 21692

Answers (2)

Lwin Htoo Ko
Lwin Htoo Ko

Reputation: 2406

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.

Upvotes: 5

Hacker Wins
Hacker Wins

Reputation: 1289

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

Upvotes: 12

Related Questions