Add custom font in Summernote

Question

in a php portal i'm using Summernote js and i have this code:

     fontname: function(lang) {
                // var aFont = [
                //   'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                //   'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
                //   'Lucida Sans', 'Verdana', 'Indie Flower', 'Slabo', 'Raleway'
                // ];

               var aFont = [
                    'Raleway', 'Open Sans Condensed', 'Marck Script', 'Libre Baskerville'
                  ];

var sMarkup = '<button type="button" class="btn btn-default btn-sm btn-small dropdown-toggle" data-toggle="dropdown" title="' + lang.font.name + '" tabindex="-1"><span class="note-current-fontname">Raleway</span> <b class="caret"></b></button>';
            sMarkup += '<ul class="dropdown-menu">';
            for (var idx = 0; idx < aFont.length; idx++ ) {
              sMarkup += '<li><a data-event="fontName" data-value="' + aFont[idx] + '"><i class="fa fa-check icon-ok"></i> ' + aFont[idx] + '</a></li>';
            }
            sMarkup += '</ul>';

            return sMarkup;
          },

Now i'd like to add 4 custom fonts in TTF format....how can i add my own fonts?

in head of js file there is:

/**
 * Super simple wysiwyg editor on Bootstrap v0.5.2
 * http://hackerwins.github.io/summernote/ **/

Answer 1

Here is how I added custom fonts in SummerNote Editor and defined the default font and font size to be used by SummerNote:

1 - As I am using Bootstrap 4.5 and JQuery 3.5, I first needed to make sure to use the latest release of Summernote (at this moment: v0.8.18). Or else the font dropdown in SummerNote did only show empty font lines!

2 - In my JS code, I defined:

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

---

3 - As I prefer to have the fonts on my own server (for closed IntraNet use), I have downloaded the Google TFT fonts and convertered these to WOFF.

I have uploaded the woff and woff2 versions on my server in the folder fonts.

4 - Next, I have written the following fonts.css file and also uploaded it to the fonts folder:

---

@font-face {
    font-family: 'Amethysta';
    src: url('Amethysta/amethysta-regular-webfont.woff2') format('woff2'),
         url('Amethysta/amethysta-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Poppins';
    src: url('Poppins/poppins-regular-webfont.woff2') format('woff2'),
         url('Poppins/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Poppins-Bold';
    src: url('Poppins/poppins-bold-webfont.woff2') format('woff2'),
         url('Poppins/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Poppins-Black';
    src: url('Poppins/poppins-black-webfont.woff2') format('woff2'),
         url('Poppins/poppins-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

            
    etc....(for all the fonts)

---

5 - Next, I have added this line in the header part of my index.html:

---

<!-- Custom Fonts CSS -->
<link rel="stylesheet" href="fonts/fonts.css">

---

6 - And finally, to define the default font in SummerNote I have added the following CSS code in my default css loaded in index.html:

---

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

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

---

It's all a bit sensitive but after carefully adding all these configs, I have now full control over using custom fonts in SummerNote.

Hope this solution helps you.

Answer 2

Import custom font in summernote.css. Please make sure your local destination of the font path is correct.

Like:

@font-face {
    font-family: 'MullerNarrow-ExtraBold';
    src: url('../webfonts/32D6E0_0_0.eot');
    src: url('../webfonts/32D6E0_0_0.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/32D6E0_0_0.woff2') format('woff2'),
         url('../webfonts/32D6E0_0_0.woff') format('woff'),
         url('../webfonts/32D6E0_0_0.ttf') format('truetype');}

and declare the specific font in summernote.js file like you did earlier.

Answer 3

Include font style on your page. For example, I am adding the Roboto font family.

<link href="https://fonts.googleapis.com/css?family=Roboto" / rel="stylesheet">

or

@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 400;
 src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }

Configure the new font name with default fonts. Should ignore to check the new font as it takes time to load.

$('#summernote').summernote({
  fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana', 'Roboto'],
  fontNamesIgnoreCheck: ['Roboto']
});

Make the New font as default.

$('#summernote').summernote('fontName', 'Roboto');

Answer 4

Custom fontNames You can define fontNames items with the fontNames option.

check

$('#summernote').summernote({fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']});

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