Adding Fonts To CKEditor

Adding additional fonts to CKEditor is pretty easy. In this tutorial I am going to show you how to do it.

Create a file and name it fonts.css.

Create a folder and name it fonts.

Once downloaded unzip the font and place it in the fonts folder.

First let's go to Google Fonts and download a font. I am going to get AbrilFatface.

To list fonts in alphabetical order start at the bottom and work to the top. These are the fonts I added to the editor below. It's always best to download the fonts.

Try the fonts in the editor below.

I hope this helped you.

To recap:

  • Download the font
  • Unzip and place it in the fonts folder.
  • Add the code snippet to fonts.css
  • Add the font to config.js