Summernote set default font size and font

Question

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/

Labana

Try with fontSize: 16 and fontName: 'Arial' – Compliance

@Compliance still not working. jsfiddle.net/dtgr5q29/142 – Labana

Answer 1

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

Ramonitaramos

Oh.. I found the reason. But little thing. It change font size only when i click in editor field. Maybe you know way to fix this? – Labana

Ok i found way to fix this. So just need to add to .css file like this: .note-editable { font-family: Calibri; font-size: 16px!important; } – Labana

If you have placeholder in the editor, you should also set .note-placeholder { font-size: 16px; } , otherwise the placeholder will have a different font size with text. – Equisetum

Answer 2

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.

Luciennelucier

Answer 3

This seems to work

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

Walther

Code-only answers are not particularly helpful. Please add some descriptions of how this code solves the problem. – Thomas

Answer 4

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

Marquittamarr

Answer 5

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

Chesson