Search code examples
javascripttext-editorrich-text-editornicedit

How to add fonts into NicEdit?

My website allows user write short stories. I want they can free to format and style text, so I install NicEdit to do that. But NicEdit just has 9 default fonts; how to add more?

This is my editor. It use default code with full panel control. enter image description here

Solution

  • Very happy, I've added news fonts NicEdit successful. I post answer here, hope it userful for everyone has the same problem.

    1.Download font file, save in some folder, in my way is 'css/font'

    2.Register in css file: add a css file "CustomFonts.css" has content: (I use Fugaz One download from Google Font)

    @font-face {
  font-family: "FugazOne";
  src: url('font/FugazOne-Regular.ttf');
  src: url('font/FugazOne-Regular.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

    You may change path to font file.

    3.Link css file in html form, before add nicEdit.js lib:

    <link rel="stylesheet" type="text/css" href="css/customFont.css" />
<script type="text/javascript" src="js/nicEdit/nicEdit_dev.js"></script>

    4.Open nicEdit.js and find word "nicEditorFontFamilySelect". You will see a fonts list use in nicEdit, add new font here by font-family register in css:

    sel : {'arial' : 'Arial',..., 'FugazOne':'FugazOne'},

    5.tada... DONE!

    P/s: when show content from database, you must sure webpage had load customFont.css.