I'm using last version summernote library. How i can set default font size and font? I'm trying like this, but its not working:

 $('.text-editor').summernote({
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['codeview']]
        ],
        fontsize: '16'
    });

/

I'm using last version summernote library. How i can set default font size and font? I'm trying like this, but its not working:

 $('.text-editor').summernote({
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['codeview']]
        ],
        fontsize: '16'
    });

https://jsfiddle.net/dtgr5q29/142/

• javascript
• summernote

• Try with fontSize: 16 and fontName: 'Arial' – yuriy636 Commented Jul 6, 2017 at 9:07
• @yuriy636 still not working. jsfiddle.net/dtgr5q29/142 – Dmitry Vasilyuk Just3F Commented Jul 6, 2017 at 9:12

5 Answers 5

A possible solution to this is to apply directly the font-size style to the editor div using jQuery

$('.active-textcontainer').summernote({
    toolbar: [
        ['style', ['bold', 'italic', 'underline']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']]
    ],
     height:150
});

$('.note-editable').css('font-size','18px');

More .. How to set font-size in summernote?

Thanks

Add this CSS to your own CSS file to override the settings from summernote.css:

/* ---------------------------------------------------
   SummerNote
----------------------------------------------------- */

.note-editable { 
    font-family: 'Poppins' !important; 
    font-size: 15px !important; 
    text-align: left !important; 
    
    height: 350px !important;
    
}

NB. For this example, I am using the following summernote initialization:

var gArrayFonts = ['Amethysta','Poppins','Poppins-Bold','Poppins-Black','Poppins-Extrabold','Poppins-Extralight','Poppins-Light','Poppins-Medium','Poppins-Semibold','Poppins-Thin'];

jQuery('#' + myID).summernote({
    fontNames: gArrayFonts,
    fontNamesIgnoreCheck: gArrayFonts,
    fontSizes: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '18', '20', '22' , '24', '28', '32', '36', '40', '48'],
    followingToolbar: false,
    dialogsInBody: true,
    toolbar: [
    // [groupName, [list of button]]
    ['style'],
    ['style', ['clear', 'bold', 'italic', 'underline']],
    ['fontname', ['fontname']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],       
    ['para', ['ul', 'ol', 'paragraph']],
    ['table', ['table']],
    ['view', ['codeview']]
    ]
}); 

And of course you need to load all these fonts via CSS.

This seems to work

        $('#summernote').summernote('fontName', 'Arial');
        $('#summernote').summernote('fontSize', '12');

If your editor is not running with simple text, you need to bind something to work it. Add this code into your summernote

$('#summernote').summernote('formatPara');

I noticed that using $('.note-editable').css('font-size','18px') seams to the cause the page to focus on the note when loading, which in my case caused the page to scroll to the bottom every time.

in the summernote.css, adding font-size: 16px; to .note-editor seems to do the trick without the scrolling problem.

just make sure this is in your summernote.css

.note-editor {
    position: relative;
    font-size: 16px;    
}