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/ **/
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!
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.